Firework-Fun

www.firework-fun.com is an activity set against a night sky that allows users to design their own fireworks show by choosing the location, color, and relative timing of fireworks. The explosion trajectories of the fireworks are generated by custom trigonometric algorithms.

Run on local machine

Manually

• open public/index.html

Using npm

• npm install
• npm start

Using rack setup via Procfile

• bundle install --gemfile=Gemfile
• bundle exec rackup -p $PORT e.g. bundle exec rackup -p 9292

The second command uses the Procfile, which points to the config.ru file for more information about running the webserver.

Features Highlight

Demo Show

Users can play a pre-designed show with a single click.

Custom Algorithm Trajectories

I used trigonometry to direct the trajectories of each pellet over hundreds of iterations to create custom animations with vanilla JavaScript.

let fade = 0;
let magnitude = 1;
let gravity = -1;
let counter = 0;
let numIterations = 300;


let z = setInterval(function(){

    for(let i = 0; i < x.pelletArray.length; i++) {

        let pelote = x.pelletArray[i];
        let newAlpha = pelote.alpha - fade;

        let newX = pelote.x;
        let newY = pelote.y;
        let changeX = 0;
        let changeY = 0;
        let divisor = 20;

        let angleGroup = (i % divisor);  

        if (true) {
          let theta = (angleGroup * 2 * Math.PI / divisor);

          changeX = magnitude * Math.cos(theta);
          changeY = magnitude * Math.sin(theta);
        }

...

    magnitude += 5;
    gravity += 2;
    counter++;

    if (fade < 1){
      fade += (0.02);
    }

    if(counter === (numIterations * 0.19)) {
      fireContext.fillStyle = "rgba(0, 0, 0, 0.3)";
      fireContext.clearRect(0, 0, fireCanvas.width, fireCanvas.height);
    }

    if(counter === numIterations) {
        clearInterval(z);
    }

}, 20);

Intuitive Instructions

Development plans included a tutorial, but I made the game more intuitive by condensing instruction into the labels for the buttons. This enables users to start the activity with minimal reading.

Firework Placement

Users can see the location and color of each firework placed (before the show plays) to aid in design.

Technology

Fireworks-Fun is a single-page web application that mimics physics with low reliance on external libraries:

• Vanilla JavaScript to manage structure, handle game logic, and manually create intricate animation shapes with custom algorithms
• Canvas to display animations
• Webpack to bundle and serve up various scripts

Project Design

• View Wireframes
• Development README

Future Development

Multiple Firework Shapes & Sounds

Users will customize fireworks by combining color, shape, and sound each time they add a firework.

Custom Algorithm Design

Users will determine custom shapes of fireworks by adjusting some of the inputs to the algorithms that determine firework trajectory and shape.

Speed Control & Playback

Users will control the speed of play and be able to rewind and fast-forward through their show.