In 2013 I built a slot machine^[3] for my website using photographs of my resin models.

At that time using jQuery and HTML5 for animating events was the modern way. When considering communication events for a winning prize I thought of a fireworks display.

The physics for particle movement in three dimensional space are beyond my capabilities. Fortunately, Paul Lewis^[2] did the math and had the creativity to put a realistic fireworks solution together. I modified his work to both extend and automate his fireworks show.

My slot machine has six symbols on each of the three wheels. The probability that any one symbol will appear on all the wheels is 1/6 x 1/6 x 1/6 or one chance in 216. This slot machine will win if any of the same symbols stop on all wheels so we actually have 6 chances in 216 trials. Now, you do the math to figure out how many times you might have to play my slots to have a 95% assurance that you will win and see the fireworks.

I will show you my fireworks if you send me an email message. Or, if you want to try your luck, play with my slot machine. If you win, you will get fireworks! You can also click here to cheat before you spin the wheels. This is particularly helpful when we can’t do the math.

Your browser does not support JavaScript.

Enhancements

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

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 shown here.

  /**
   * 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);
    }
  }

References