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 ARPANET ARPANET was the first implementation of a packet switching network with TCP/IP protocols. Prior to this, telecommunication companies switched circuits. Each call was allocated a dedicated end-to-end circuit connection for analog signals. Packet switching was a new technology that bundled digital information into packets of data that were converted into analog signals and routed over free circuits as they became available. In the early days few people understood the packet switching equipment or the digital protocols that were embedded in the data.. 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.

fireworks1

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 radius = 80;
    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.


    // add the canvas in
    document.body.appendChild(mainCanvas);
    mainCanvas.addEventListener('mouseup', createFirework, true);
    mainCanvas.addEventListener('touchend', createFirework, true);
	
    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