HAPPILY EVER AFTER

Coding a fireworks show

TEAM: Solo project

SKILLS: Creative Coding, p5.js, Prototyping

DURATION: 6 weeks

INSPIRATION

Happily Ever After is a Walt Disney World’s nighttime spectacular show, recreated with interactive elements.

Make sure you have your sound on, hit the play button in the top left, and enjoy the show. And don’t forget to play with Tinkerbell!


PROCESS

CHALLENGE

Happily Ever after is the nighttime fireworks show at Walt Disney World, which sadly ended in September 2021. I did not get to see this show in person but I watched the live streaming often during the quarantine to lift myself up so I decided to recreate this show using p5.js.

I coded the background sky to be gradient with fireworks and castle light, using the lerpColor() and used light purple and dark blue to match the color of the castle. To shape the landscape, I employed curveVertex() to craft a hill. The most challenging aspect involved coding the fireworks, demanding a week of persistent trial and error, iterating through various versions until achieving the desired effect. Inspired by the live show where Tinkerbell emerges from the castle, I introduced an interactive element— a small Tinkerbell appears on mouse press, allowing users to move it around the canvas with mouseDragged(). To enhance the immersive experience, I integrated an audio file, echoing the ambiance of a real show.

The biggest challenge was to figure out the physics of the fireworks code. I first generated an array of particles and making them move up and down, then deconstructed the coding tutorial to understand how the physics side of the fireworks work to make the particles go up, explode when reached to y=0, and fall down individually.


The final product

Click below → Turn the volume on → Click the play button in the top left → enjoy the show!