Happy New Year 2013

Happy New Year 2013

4 23185
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

Bootstrap Forms

0 60
jQuery Mobile Lesson 6

0 15

4 COMMENTS

Leave a Reply