Home ยป Celebratory fireworks animation

Celebratory fireworks animation



It works fine for me in Opera and Chrome, but it is buggy in Firefox.

Profiling reveals that redraw is responsible (big surprise ๐Ÿ™‚ ), and there is not much to optimize without changing the whole concept. Two minor optimizations might be:

  • save 2 * Math.PI in a constant.
  • assign context.fillStyle = particle.color; outside the particles loop (all particles of one object have the same color).

But this isn’t enough to make it run lag-free in Firefox for me. It works fine with max 3 fireworks and 300 particles (although a bit boring).


There are a lot of things that could be done to make it more realistic (with a lot of work, and probably heavy performance costs), but I think that your version is quite good. It doesn’t actually look that much like real firework, but it’s a great representation. It looks good and everybody knows that it’s supposed to be fireworks.

The main difference to real fireworks is that the particles of real fireworks don’t look like dots most of the time, but like lines (or drops, especially when falling down).

Also, real fireworks tend to come in groups of explosions, not in timed intervals (because it’s more exciting to see one giant scene instead of a steady stream of small once). This is not something I would aim for in an animation though.


  • objects is a bit generic, I think. drawableObjects would be a bit clearer, but as it expects fireworks anyways, I would go with fireworks.
  • launch also might be a bit generic. launchFireworks would make it clear that it adds a new firework (as opposed to say launch the animation, or launch a new particle).
  • I would use fireworks instead of f (and maybe particle instead of p) in redraw.


  • it’s fine to hardcode math factors, but if you put the other magic numbers in fields (interval length, number of particles, number of fireworks, time of whole animation, etc), it would be easier to test/change configurations.

Portability / Compatibility: Does it work correctly on all modern browsers (excluding old versions of Internet Explorer)?

In Safari, there is a cute tingly-shiny (don’t know how to call it) effect as the fully spread pieces fade out. In Chrome, either there is no such effect, or it’s so faint it’s not visible. (I’m on a Mac.) (Sorry, I don’t know enough about animations / canvas to have clue as to why…)

Modelling: Is this a good way to simulate fireworks? Is there anything I could do to enhance the realism?

In the small view the snippet, it looks great. If you switch to full screen and look at it long enough, some minor warts start to show:

  • At end of the explosion, the pieces are all moving together, as if stuck on an invisible paper and floating down

  • The pieces seem to be moving downward at constant speed instead of accelerating, as if there’s no gravity, or gravity is very week. It doesn’t really look like they are falling

  • I suppose there is a time limit: after some time the fireworks just stop, though the airplane keeps flying through. And the fireworks don’t stop gracefully, but in the middle of explosions, just frozen in the air.

Minor technical things

Semicolons are missing at the end of the definitions of Animation.prototype.start and Animation.prototype.stop. Which is valid, but not consistent with the rest of the code.

The greek variable names are cool…

var ฯ„ = 2 * Math.PI;

… it’s just that, I don’t know how to type them :-/. It would be simpler to just use English words.

The bottom line …

Oh nevermind any of that! Big THANK YOU ALL for the amazing site and community! The announcement was unexpected and witty, very befitting, and pure awesomeness!

You should always have an Alt attribute in your img tags

<img src="http://i.stack.imgur.com/bGZ1m.png" width="80" height="43">
<img src="http://i.stack.imgur.com/bGZ1m.png" width="80" height="43" 
       alt="Toy Airplane - Based on public domain image 
      http://pixabay.com/en/aeroplane-aircraft-airplane-flight-161999/" >

new lines added for less scrolling and not necessary

Alt attribute can be anything but should describe the image, it’s used for many different things including screen readers for visually impaired users.

Related Solutions

mysql: Show GRANTs for all users

Nothing built-in. You have two options though: Use common_schema's sql_show_grants view. For example, you can query: SELECT sql_grants FROM common_schema.sql_show_grants; Or you can query for particular users, for example: SELECT sql_grants FROM...

Configurable values to MDB annotations

You can externalise the annotations into the ejb-jar.xml that you deploy in the META-INF of your jar file as follows: <?xml version="1.0" encoding="UTF-8"?> <ejb-jar version="3.0"> <enterprise-beans> <message-driven>...

How do I select which Apache MPM to use?

There are a number of MPM modules (Multi-Processing Modules), but by far the most widely used (at least on *nix platforms) are the three main ones: prefork, worker, and event. Essentially, they represent the evolution of the Apache web server, and the different...

Using var self = this or .bind(this)? [closed]

Things that would favor var self = this; bind isn't supported in IE8 and Safari5. If you aim to build a library or code that supports legacy browsers, then var self = this would be more cross-browser friendly. Sometimes, callbacks are bound to a certain context...

What is the difference between SSL vs SSH? Which is more secure?

SSL and SSH both provide the cryptographic elements to build a tunnel for confidential data transport with checked integrity. For that part, they use similar techniques, and may suffer from the same kind of attacks, so they should provide similar security (i.e....

How can I stop applications and services from running?

First Things First You may have some misconceptions about how Android works and what's really happening when a service is running or an app is in the background. See also: Do I really need to install a task manager? Most apps (e.g., ones you launch manually)...

How do I reset a lost administrative password?

By default the first user's account is an administrative account, so if the UI is prompting you for a password it's probably that person's user password. If the user doesn't remember their password you need to reset it. To do this you need to boot into recovery...

How can I use environment variables in Nginx.conf

From the official Nginx docker file: Using environment variables in nginx configuration: Out-of-the-box, Nginx doesn't support using environment variables inside most configuration blocks. But envsubst may be used as a workaround if you need to generate your...

Difference between .bashrc and .bash_profile

Traditionally, when you log into a Unix system, the system would start one program for you. That program is a shell, i.e., a program designed to start other programs. It's a command line shell: you start another program by typing its name. The default shell, a...

Custom query with Castle ActiveRecord

In this case what you want is HqlBasedQuery. Your query will be a projection, so what you'll get back will be an ArrayList of tuples containing the results (the content of each element of the ArrayList will depend on the query, but for more than one value will...

What is the “You have new mail” message in Linux/UNIX?

Where is this mail? It's likely to be in the spool file: /var/mail/$USER or /var/spool/mail/$USER are the most common locations on Linux and BSD. (Other locations are possible โ€“ check if $MAIL is set โ€“ but by default, the system only informs you about...

How can I find the implementations of Linux kernel system calls?

System calls aren't handled like regular function calls. It takes special code to make the transition from user space to kernel space, basically a bit of inline assembly code injected into your program at the call site. The kernel side code that "catches" the...

Is a composite index also good for queries on the first field?

It certainly is. We discussed that in great detail under this related question: Working of indexes in PostgreSQL Space is allocated in multiples of MAXALIGN, which is typically 8 bytes on a 64-bit OS or (much less common) 4 bytes on a 32-bit OS. If you are not...

Explaining computational complexity theory

Hoooo, doctoral comp flashback. Okay, here goes. We start with the idea of a decision problem, a problem for which an algorithm can always answer "yes" or "no." We also need the idea of two models of computer (Turing machine, really): deterministic and...

Building a multi-level menu for umbraco

First off, no need pass the a parent parameter around. The context will transport this information. Here is the XSL stylesheet that should solve your problem: <!-- update this variable on how deep your menu should be --> <xsl:variable...