Happy New Year 2013

Happy New Year 2013

4 25145
Happy New Year 2013

Happy New Year 2013

Today – New Year’s Eve Day. And we would like to congratulate all of our readers to this wonderful event. Thank you for being with us from the beginning, feel free to visit our website and in the New Year where you will find a great variety of new tutorials and articles. Today we have prepared an interesting html5 postcard for Christmas and New Year. This is animated Snowflakes at canvas.

Welcome to test our demonstration, and download the sources

Live Demo
Live Demo 2

Step 1. HTML Markup

As usual for html5 tutorials – our HTML markup is very easy:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Happy New Year 2013 - HTML5 card | Script Tutorials</title>
        <link rel="stylesheet" href="css/main.css" type="text/css" />
        <script src="js/script.js"></script>
    </head>
    <body>
        <header>
            <h2>Happy New Year 2013 - HTML5 card (<a href="https://www.script-tutorials.com/happy-new-year-2013/">Back to original tutorial</a>)</h2>
        </header>
        <canvas id="panel">HTML5 compliant browser required</canvas>
    </body>
</html>

There is only single canvas element. We are going to make full screen canvas with festive background image.

Step 2. JS

Now, we please create an empty file ‘js/script.js’ and put next code inside:

// canvas and context objects
var canvas, ctx;
//Snowflakes object
Snowflakes = (function () {
    // sprites information
    var sprCnt = 15;
    var sprWidth = 80;
    var sprHeight = 68;
    // arrays of snowflakes and sprites
    var snowflakes = [];
    var snowflakeSprites = [];
    // other inner params
    var minScale = 0.2; // min scale for flakes
    var maxScale = 1.2; // max scale for flakes
    var minVerticalVelocity = 2; // min vertical velocity
    var maxVerticalVelocity = 5; // max vertical velocity
    var minHorizontalVelocity = -2; // min horizontal velocity
    var maxHorizontalVelocity = 3; // max horizontal velocity
    var minOpacity = 0.1; // min opacity
    var maxOpacity = 0.9; // max opacity
    var maxOpacityIncrement = 60; // opacity increment
    // every flake swings in the interim between next deltas:
    var minHorizontalDelta = 1;
    var maxHorizontalDelta = 4;
    var speed = 2; // speed
    // get random number between x1 and x2
    function getRandom(x1, x2) {
        return Math.random() * (x2 - x1) + x1
    }
    // initialize sprites
    function initializeSprites() {
        var img = new Image();
        img.onload = function () {
            // fill snowflakeSprites with every sprite of sprite.png
            for (var i = 0; i < sprCnt; i++) {
                // create new canvas
                var sprite = document.createElement('canvas');
                sprite.width = sprWidth;
                sprite.height = sprHeight;
                var context = sprite.getContext('2d');
                // and draw every sprite at this canvas
                context.drawImage(img, i * sprWidth, 0, sprWidth, sprHeight, 0, 0, sprWidth, sprHeight);
                // and fill array
                snowflakeSprites.push(sprite);
            }
        }
        img.src = './sprite.png';
    };
    // initialize snowflakes
    function initialize(number) {
        // initialize sprites
        initializeSprites();
        // prepare a necessary amount of snowflakes
        for (var i = 0; i < number; i++) {
            snowflakes.push(initializeSnowflake());
        }
    };
    // initialize snowflake
    function initializeSnowflake() {
        // get random scale
        var scale = getRandom(minScale, maxScale);
        return {
            x: Math.random() * ctx.canvas.width, // x and
            y: Math.random() * ctx.canvas.height, // y positions
            vv: getRandom(minVerticalVelocity, maxVerticalVelocity), // vertical and
            hv: getRandom(minHorizontalVelocity, maxHorizontalVelocity), // horizontal velocity
            o: getRandom(minOpacity, maxOpacity), // opacity
            oi: Math.random() / maxOpacityIncrement, // opacity increment
            mhd: getRandom(minHorizontalDelta, maxHorizontalDelta), // maximum horizontal delta
            hd: 0, // horizontal delta
            hdi: Math.random() / (maxHorizontalVelocity * minHorizontalDelta), // horizontal delta increment
            sw: scale * sprWidth, // scaled sprite width
            sh: scale * sprHeight, // and height
            si: Math.ceil(Math.random() * (sprCnt - 1)) // sprite index
        }
    };
    // move flakes
    function moveFlakes() {
        for (var i = 0; i < snowflakes.length; i++) {
            var osf = snowflakes[i];
            // shift X and Y position
            osf.x += (osf.hd + osf.hv) * speed;
            osf.y += osf.vv * speed;
            // swings
            osf.hd += osf.hdi;
            if (osf.hd < -osf.mhd || osf.hd > osf.mhd) {
                osf.hdi = -osf.hdi;
            };
            // collision with borders
            if (osf.y > ctx.canvas.height + sprHeight / 2) {
                osf.y = 0
            };
            if (osf.y < 0) {
                osf.y = ctx.canvas.height
            };
            if (osf.x > ctx.canvas.width + sprWidth / 2) {
                osf.x = 0
            };
            if (osf.x < 0) {
                osf.x = ctx.canvas.width
            };
            // toggle opacity
            osf.o += osf.oi;
            if (osf.o > maxOpacity || osf.o < minOpacity) {
                osf.oi = -osf.oi
            };
            if (osf.o > maxOpacity)
                osf.o = maxOpacity;
            if (osf.o < minOpacity)
                osf.o = minOpacity;
        }
    }
    // render frame
    function renderFrame() {
        // move (shift) our flakes
        moveFlakes();
        // clear content
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        // draw each flake
        for (var i = 0; i < snowflakes.length; i++) {
            var osf = snowflakes[i];
            ctx.globalAlpha = osf.o;
            ctx.drawImage(snowflakeSprites[osf.si], 0, 0, sprWidth, sprHeight, osf.x, osf.y, osf.sw, osf.sh);
        }
    }
    return {
        'initialize': initialize,
        'render': renderFrame,
    }
})();
// main initialization
function initialization() {
    // create canvas and context objects
    canvas = document.getElementById('panel');
    ctx = canvas.getContext('2d');
    // set canvas size - fullscreen
    ctx.canvas.width  = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
    // loop main scene
    setInterval(Snowflakes.render, 40);
    Snowflakes.initialize(100);
}
// window onload event handler
if (window.attachEvent) {
    window.attachEvent('onload', initialization);
} else {
    if (window.onload) {
        var curronload = window.onload;
        var newonload = function() {
            curronload();
            initialization();
        };
        window.onload = newonload;
    } else {
        window.onload = initialization;
    }
}

The main concept is: in the beginning we resize our canvas object (we have to make it fullscreen), then, we initialize our snowflakes (we have to initialize various sprite images and snowflake objects), once we are ready – we can start rendering frames. Render function cleans our canvas and draws every single flake. In addition, we have to move every snowflake (download it) from left to right and back again.

Step 3. CSS

We used a very simple technique to lock full-screen background image:

body {
    overflow:hidden;
    background: url("../christmas_tree1.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Live Demo

Conclusion

Happy New Year. I hope that you like our articles and experiments. Welcome back.

SIMILAR ARTICLES


4 COMMENTS

Leave a Reply