# Fireworks.js: A DHTML fireworks effect
Project page for Fireworks, a fun and downloadable javascript-driven animated fireworks experiment.
Author: Scott Schiller
Keywords: Fireworks.js DHTML animated fireworks effect free animation script

# Fireworks.js

## A javascript animation experiment

### What's this all about? (AKA, "Holy pointless lightshow, Batman!")

Fireworks.js is a bit of Javascript that creates starburst-type explosions in a web document; in short, it's a fireworks effect someone could theoretically use on their site. And come on, who doesn't want something like that? As far as appropriateness is concerned, this effect could be compared to the dripping-blood-line, skull and fireball animated .GIF images so popular on the web in 1997. Exploding firework animations are hot, the new black, the script equivalent of the `blink` tag. Mmm, blink tag.

Nonetheless, Fireworks has been published here for fun, experimenting a bit with simple trigonometry and math, and those who are perhaps interested in javascript animation, object-oriented code or script-driven sound. It also serves as a dirty browser performance test of sorts, as a large number of elements are dynamically created, moved and destroyed on this page as the script runs.

### Demo Controls

Why explain through reading when you can demonstrate by example? Try playing around with the sliders below for a wide range of visual effects. Not all combinations will look good, but the idea is to experiment.

Drag the sliders (or click a point on the bar) to set the various parameters available such as blast radius and the number of particles per explosion, then click "fire" to see the results.

The code required to generate the current effect is dynamically updated as you adjust the controls; refer to the `createFirework()` API call below.

#### Fireworks Parameters

Apply
Apply

Blast Radius
  % of window size
  1-100
Particles
  Explosion elements
  1-200
Circles
  ..per explosion
  1-8
Burst Type
  (Base colour)
  1-7

Start X
  % of window
  1-100
Start Y
  % of window
  1-100
Explode X
  % of window
  1-100
Explode Y
  % of window
  1-100

#### Additional Options

  Randomize explosion pattern
  Obey window boundaries

Fire!

Hide content (may increase performance)

#### API call for current parameters

`createFirework(nRadius,nParticles,nCircles,burstType,startX,startY,burstX,burstY));`

Note: Random values will be substituted for null arguments and options that are not applied.

### Demo Presets

Don't want to play with sliders? Here are a few canned effects that I thought were neat. Refer to the code for the parameters used to make the effect.

- Apple Key-esque
- Standard Circle
- Concentric Circles
- Cornered
- Semicircle
- CPU-heavy
- Sequence: Explosions

### Features

Fireworks does the following nifty things:

- Random explosion patterns and colours
- Customizable API allows for additional firework types and effects
- Optional script-driven sound effects provided by SoundManager API
- Nifty queue-based animation (easily set up your own firework sequences)
- Sound panning effect based on firework location (left/right) on screen
- Single-image, tile-based animation for efficiency
- Standard DOM calls work under XML doctypes (ie. application/xhtml+xml)
- Extensible (ideally), object-oriented, memory-leak-tested code*

* (I tried, but no guarantees. May drip a bit.)

### Known Bugs ("Unintended features")

- Initial object creation can temporariliy freeze active animations (depending on CPU load)
- Risk of browser crash on IE/Mozilla under Win32 from many simultaneous sound calls due to sketchy JS->ActiveX (Flash) bridge

### Use

Download, extract and view. Some basic examples are given that show the minimal requirements (Javascript/CSS references etc.) for the script to work. The code base also includes SoundManager, a Javascript API which allows ECMAscript (Javascript)-controlled sound effects reliably on IE and Mozilla across the Windows and Linux platforms.

#### Download

Fireworks v0.9.1.20110703
  - Upgraded audio to SoundManager 2, now works in more places
  - Basic code clean-up, appease the JSLINT gods
  - Also on Github
Fireworks v0.9.20050609
  - Initial build
  - Public release
  - Likely the first and last, but hey!

### Related reading

- Javascript Animation Tutorial Part 1: The Basics