# Fireworks

When we consider that the “Medium is the Message“,[1] much creative messaging has occurred in the evolution of computing. Today, there is a new generation of people brought up with new communications technology that use new faster computers to deliver a whole new message.

There was a time in the early 1980`s when I frequently had to call the telephone company to advise that I could not transmit data across their leased lines. I swore that their technicians looked out the window of their office to see the lines properly attached up on the telephone pole, and thought: What could be the problem? The lines clearly aren’t down.

Telecommunications folks once knew little about data. Few people knew about a computer. Few people knew about . Then came the personal computer revolution. Then came the Internet. Then came cellular smartphones and wireless networks. Times have changed.

Now, when considering communication events for ‘winning’ with my figure model slot machine on my home page, I thought of a fireworks display. The physics for particle movement in three dimensional space are interesting. Animating fireworks in a web browser with HTML5 is the modern way. Fortunately, Paul Lewis[3] has done the math and has had the creativity to put a realistic fireworks solution together. I have modified this work to automate the fireworks show.

Have a look. See the fireworks display.

And, if you want to try your luck, here is my slot machine. If you win, you get fireworks!

Yes, I make these figures.

Sorry, but Javascript does not seem to be enabled. You can’t play my slots!

### Enhancements

The fireworks code solution is documented on CreativeJS[2]. I have added a new explosive shape to create a cluster effect and introduced a timer to automate the firework launch.

```  /**
* Explodes in a multiple cluster fashion
*/
multiple: function(firework) {

var count = 100;
var circle = Math.PI * 2;
var multi = 2 + Math.round(Math.random() * 4) ;
var angle = circle / count;
var cluster = circle / multi ;
var adjustment = Math.random() * circle;

while(count--) {

var randomVelocity = 4 + Math.random() * 4;
var particleAngle = count * angle;
var cAngle = cluster * (count % multi) + adjustment ;

Fireworks.createParticle(
{
x: firework.pos.x + Math.cos(cAngle) * radius,
y: firework.pos.y + Math.sin(cAngle) * radius
},
null,
{
x: Math.cos(particleAngle) * randomVelocity,
y: Math.sin(particleAngle) * randomVelocity
},
firework.color,
true);
}
}
```

The other modification I made was to move the mouse events to the canvas and to automatically launch the fireworks. The code for this is sketched below.

```
document.body.appendChild(mainCanvas);

setTimeout(createAnotherFirework,200);
.
.
.
/**
* Pass through function to create another
* new firework on timed event
*/
function createAnotherFirework() {
if (particles.length < 10) createFirework();
var randomtime = Math.floor(Math.random()*1500) + 500;
setTimeout(createAnotherFirework,randomtime);
}
```

My modified version of the original distribution can be downloaded as a zip file here. This includes the code revisions for automated launch of the fireworks and the multiple cluster explosion pattern described above.

### References

1. Marshall McLuhan Understanding Media: The Extension of Man
2. Creative JS Make an explosive firework display
3. Paul Lewis Aerotwist
4. Saurabh Odhyan http://odhyan.com