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.
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.
objectsis a bit generic, I think.
drawableObjectswould be a bit clearer, but as it expects fireworks anyways, I would go with
launchalso might be a bit generic.
launchFireworkswould make it clear that it adds a new firework (as opposed to say launch the animation, or launch a new particle).
- I would use
- 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.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 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.