Freelance Writing Jobs | Today's Articles | Sign In


How to Make a Flickering Christmas Candle

Add a Candle to Web Site and Make it Flicker with Javascript

Nov 19, 2008 Mark Alexander Bain

This quick and easy tutorial shows how to add a animated Christmas candle to a web page

A very simple Christmas decoration that can be added on to any web site is a candle - a simple image can quickly be created using applications such as Sib, KIconEdit, or even Microsoft Paint. However, it's also very easy to create a flickering Christmas candle with just four images and some Javascript code.

The Images for a Christmas Candle

A simple Christmas candle would need two images

  • the body of the candle (which could consist of a simple rectangle)
  • a vertical flame (a simple yellow oval would suffice)

However, a flickering candle will need two additional images:

  • the flame blown to the right
  • the flame blown to the left

Displaying the Christmas Candle

The Christmas Candle can be displayed by using standard HTML, and in this case:

  • all of the images are grouped together in a div - it's this that is used to define where on the screen the candle will be displayed
  • to start with only the vertical flame will be visible

And so the HTML will look something like:

<body>
<div style=position:absolute;z-index:0;left:300;top:150>
<img id=flame1 src=flame1.png
style=position:absolute;visibility:hidden;left:16>
<img id=flame2
src=flame2.png style=position:absolute;left:16>
<img id=flame3
src=flame3.png style=position:absolute;visibility:hidden;left:16>
<img src=body.png style=position:absolute;top:32>
</div>
</body>

Of course this will display a static candle - the next stage is to animate the flame.

Adding a Flicker to the Flame

A flicker can be added to the candle's flame very easily by alternately making each of the images visible and then invisible:

  • if flame 1 is visible then make flame 1 invisible and flame 2 visible
  • if flame 2 is visible then make flame 2 invisible and flame 3 visible
  • if flame 3 is visible then make flame 3 invisible and flame 1 visible

This can easily be translated into a Javascript function:

<script>
function regular_flicker() {
if (document.images["flame1"].style.visibility == "") {
document.images["flame1"].style.visibility="hidden"
document.images["flame2"].style.visibility=""
} else if (document.images["flame2"].style.visibility == "") {
document.images["flame2"].style.visibility="hidden"
document.images["flame3"].style.visibility=""
} else if (document.images["flame3"].style.visibility == "") {
document.images["flame3"].style.visibility="hidden"
document.images["flame1"].style.visibility=""
}
setTimeout ('regular_flicker()', 500 );
}
regular_flicker();
</script>

In this example the function resubmits itself so that it repeats every 500 milliseconds (0.5 seconds). However, there is a drawback to this: the flicker is very regular and has a 1,2,3,1,2,3 pattern. Obviously the next step is to add a random element to the candle's flicker.

Adding Randomness to the Flickering Flame

The flame of a real candle does not simply flow from left to right and back to left again; in the case of this 3 position candle there will be the following possibilities:

  • the left image can either remain unchanged or change to the vertical image
  • the vertical image can remain unchanged, change to the right image or change back to the left image
  • the right image can either remain unchanged or change to the vertical image

In this second function a random decision making process has been added to give a more realistic flicker:

function random_flicker() {
var rand_no = Math.random();
center_choice = parseInt (rand_no * 3);
lr_choice = parseInt (rand_no * 2);
if (document.images["flame1"].style.visibility == "") {
if (lr_choice == 1) {
document.images["flame1"].style.visibility="hidden"
document.images["flame2"].style.visibility=""
}
} else if (document.images["flame2"].style.visibility == "") {
if (center_choice == 0) {
document.images["flame2"].style.visibility="hidden"
document.images["flame3"].style.visibility=""
} else if (center_choice == 2) {
document.images["flame2"].style.visibility="hidden"
document.images["flame1"].style.visibility=""
}
} else if (document.images["flame3"].style.visibility == "") {
if (lr_choice == 0) {
document.images["flame3"].style.visibility="hidden"
document.images["flame2"].style.visibility=""
}
}
setTimeout ('random_flicker()', 500 );
}
random_flicker();
</script>

Conclusion

This short tutorial has shown just how easy it is to:

  • add a Christmas candle to a web page
  • animate the flame of the Christmas candle
  • give the flame of the Christmas candle realistic movement

And this simple technique can be applied to other Christmas themes:

  • a waving Santa
  • Rudolf with moving eyes

In each case it's only the images that would need to change whilst the code can remain the same.

The copyright of the article How to Make a Flickering Christmas Candle in Computer Programming is owned by Mark Alexander Bain. Permission to republish How to Make a Flickering Christmas Candle in print or online must be granted by the author in writing.
A Flickering Christmas Candle, Mark Alexander Bain A Flickering Christmas Candle
The Candle Wax, Mark Alexander Bain The Candle Wax
The Flame Blown Left, Mark Alexander Bain The Flame Blown Left
The Vertical Flame, Mark Alexander Bain The Vertical Flame
The Flame Blown Right, Mark Alexander Bain The Flame Blown Right
 
What do you think about this article?

NOTE: Because you are not a Suite101 member, your comment will be moderated before it is viewable.
post your comment
What is 10+9?
;