Over a million developers have joined DZone.

Cold Outside? Warm Up With This Animated HTML5 Fireplace

· Web Dev Zone

Easily build powerful user management, authentication, and authorization into your web and mobile applications. Download this Forrester report on the new landscape of Customer Identity and Access Management, brought to you in partnership with Stormpath.

HTML5 fire effect

Here's a new interesting HTML5 tutorial – I will tell you how you can create an attractive html5 canvas fireplace. The main problem is – to draw a live fire on a canvas.

Here are our demo and downloadable package:

Live Demo

download in package

Ok, download the source files and let's start coding !


Step 1. HTML

Here is the html code of our fireplace page:

index.html

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 fire effect | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <div class="container">
            <canvas id="panel" width="370" height="175"></canvas>
        </div>
        <footer>
            <h2>HTML5 fire effect</h2>
            <a href="http://www.script-tutorials.com/html5-fire-effect/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </footer>
    </body>
</html>

Step 2. CSS

Here are the CSS styles used:

css/main.css

*{
    margin:0;
    padding:0;
}
body {
    background-color:#bababa;
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
    background-image: url(../images/bg.jpg);
}
footer {
    background-color:#212121;
    bottom:0;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    left:0;
    position:fixed;
    width:100%;
    z-index:100;
}
footer h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
footer a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
footer .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}
.container {
    background-image: url(../images/fireplace.png);
    bottom:70px;
    color:#000;
    height:482px;
    left: 200px;
    position:fixed;
    width:860px;
}
.container #panel {
    margin-left: 235px;
    margin-top: 75px;
}

Step 3. JS

js/script.js

// variables
var canvas, ctx;
var data_width;
var data_height;
var colors = [];
var out_data = [];

// new filled array function
function new_filled_array(len, val) {
    var rv = new Array(len);
    while (--len >= 0) {
        rv[len] = val;
    }
    return rv;
}

// prepare palette function
function prepare_palette() {
    for (var i = 0; i < 64; ++i) {
        colors[i + 0] = {r: 0, g: 0, b: i << 1, a: i};
        colors[i + 64] = {r: i << 3, g: 0, b: 128 - (i << 2), a: i+64};
        colors[i + 128] = {r: 255, g: i << 1, b: 0, a: i+128};
        colors[i + 192] = {r: 255, g: 255, b: i << 2, a: i+192};
    }
}

// drawing functions
function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawScene() { // main drawScene function
    clear(); // clear canvas

    var data_cnt = data_width * (data_height - 1);
    for (var i = 0; i < data_width; i++) {
        out_data[data_cnt + i] = (0.7 > Math.random()) ? 255 : 0;
    }

    for (var y = 0; y < 175; y++){
        for (var x = 0; x < data_width; x++){
            var s = data_cnt + x;

            var temp_data = out_data[s] + out_data[s + 1] + out_data[s - 1] + out_data[s - data_width];
            temp_data >>= 2;
            if (temp_data > 1){
                temp_data -= 1;
            }
            temp_data <<= 0;

            out_data[s - data_width] = temp_data;

            var id = s << 2;
            img_data.data[id + 0] = colors[temp_data].r; // red
            img_data.data[id + 1] = colors[temp_data].g; // green
            img_data.data[id + 2] = colors[temp_data].b; // blue
            img_data.data[id + 3] = colors[temp_data].a; // alpha
        }
        data_cnt -= data_width;
    }

    // draw result data
    ctx.putImageData(img_data, 0, 0);
}

if (window.attachEvent) {
    window.attachEvent('onload', main_init);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function() {
            curronload();
            main_init();
        };
        window.onload = newonload;
    } else {
        window.onload = main_init;
    }
}

function main_init() {

    // creating canvas and context objects
    canvas = document.getElementById('panel');
    ctx = canvas.getContext('2d');

    // preparing initial image data (empty)
    img_data = ctx.createImageData(canvas.width, canvas.height);

    data_width = img_data.width,
    data_height = img_data.height,

    prepare_palette();

    // allocating array with zeros
    out_data = new_filled_array(data_width * data_height, 0)

    setInterval(drawScene, 30); // loop drawScene

}

Most of the code – pure mathematics. You are welcome to spend some time to understand all these processes. I have tried to comment this code as much as  possible.

 

Source: http://www.script-tutorials.com/html5-fire-effect/

 

 

 

 

 

The Web Dev Zone is brought to you by Stormpath—offering a complete, pre-built User Management API for building web and mobile applications, and APIs. Download our new whitepaper: "Build Versus Buy: Customer Identity Management for Web and Mobile Applications".

Topics:

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}