Fireworks (web Animation) (version 1.0)

Intro: Fireworks (web Animation) (version 1.0)

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.

Comments

[That_Jamie_S_Guy]

another cool animation, good job :)

[www139]

Thanks!

[That_Jamie_S_Guy]

your welcome :) this seems so confusing! what are where you when you started learning this?

[www139]

Do you mean how old was I? I was 12 years old when I started. Of course, I didn't start doing stuff like this. I learned by getting books from my local library. Let me know and I'll tell you some of my favorite books. :)

[That_Jamie_S_Guy]

yep I wanted to know how old you was:) I wanted to start when i was 12, I'm 13 now (14 in 4 days!) and still haven't xD

[www139]

I am so pissed at my brother right now! He replied to these comments and I haven't even read them. He gets all the emails with notifications which means I don't even know about these things until a week later (lol). We'll clearly have to figure out a new email system to make sure that we are both clearly informed.

Happy birthday to you :)

I started at 12 but if you are taking a class for this or have a mentor, you can learn it (I think) much more quickly. If you were going to start, you should start with web programming because software programming is much harder. I tried to learn Java at 12 but it didn't work out so I moved on to web development which has been a success. Right now I'm 15 coming up on 16 in a few months.

You can start with HTML, CSS, and later Javascript. HTML and CSS aren't full programming languages but they just create and style the elements on the page. Later, you can move on to server backend programming with PHP and database stuff like MySql.

[That_Jamie_S_Guy]

OK thank you! I know a tiny bit of html and like 1 command in python xD

[www139]

You are ahead of me in Python then because I don't even know a single line! HTML and CSS are not difficult at all so if you spend just a little time you will pick it up without too much effort :)

[That_Jamie_S_Guy]

OK thank you! I will try a bit soon :) in ICT we made webpages on adobe Dreamweaver. we only used design side not code however I should be able to learn some from that

[www139]

Cool ;)

[That_Jamie_S_Guy]

oh and i just realised how confusing I sounded with that comment xD who what we where where you xD. my keyboard went slightly funny