Introduction: Fireworks (web Animation) (version 1.0)

By

Please click the link to watch the firework animation (Firework Animation).

This project is an animation of fireworks that took over 8 hours of work to create. To view the animation, please follow this link with a browser other than Internet Explorer. I would also appreciate your support in the instructables technology contest.

Here is a link for a jsfiddle with code comments added to almost every single line of JavaScript to allow Javascript oriented people to read along. Firework animation with comment notes.

Out of concern of the high CPU usage in response to the computer processing this web page, I asked a question on code review stackexchange which you can read here. The answer I received suggested to use canvas or use requestAnimationFrame(); (native Javascript function) to prevent the use of all the timers this script currently uses. I think I'll be learning canvas soon because browsers are obviously not built to be able to process animations like this in the DOM (document object model [ wikipedia DOM article ]) alone.

If you are not fluent in JavaScript, you can understand how this works by reading below.

The stars:

When the page loads, function initialize(); is called which sets up everything. It starts by setting up the stars in the background by creating a star with random x y coordinates along the viewport width and height. It will create a star for each pixel that the viewport is wide.

Viewport is the visible part of the page. Viewport width is the width of the visible part of the page and viewport height is the height of the visible part of the page.

Here is the long definition of "viewport" wikipedia viewport article. The short definition is that the viewport is the area of the visible height of the page (multiplied by) the visible width of the page.

The star then is positioned randomly inside the viewport.

The creation of the fireworks:

The fireworks are created after the stars have finished coming to be :)

Each firework is 100px below the viewport (so you can't see it) and is assigned a random x coordinate and a random color. Each firework is also given 12 rays (they show up when the firework explodes). At the top of the document, the variables are set that give the rotation and x-y position of each firework ray, relative to the firework. These positions and rotation are assigned to each ray of the firework.

If the browser supports filter:blur(); a blurred background is created for the firework.

Firework timing functions and animation:

After all the fireworks are created, the function fireworkTiming(); is called. This function loops through each firework and calls the nested function createTimer();. This nested function creates a slightly varying timer for each firework and when the timer expires, the given firework is animated between 7/10ths and 9/10ths of the viewport height. If all the fireworks have been animated, they are all reset to their original state with new position and color assignments. After the firework is sent up into the "air", a function called explodeTimer(); is called which creates a timer that waits for the firework to nearly finish the animation that throws it into the air and then expands the firework rays and adds the blurred background to make it appear as though it is exploding. A timer for 800 milliseconds is set and when that time is up, the entire firework starts to fade out.

Resize function:

When the browser window is resized, several things need to happen to make sure that fireworks or stars still have the desired behavior. Firstly the viewport width and height variables are reset so that all of the other calculations discussed earlier that depend on those variables are accurate. Since the resize event is a recurring event and fires sometimes tens of times when resizing the browser windows and to make better efficiency than to recreate everything on every resize, there is a timer setup which will only call the initialize(); function 100 milliseconds after the very last resize event, thus preventing complete overload of the browser trying to keep up with the otherwise overwhelming code.