My Realistic Physics Contribution to ConfettiSwiftUI

I was recently working on my Wordie app & needed some confetti to celebrate a victory when the user guesses the correct word. I built the app completely in SwiftUI so I started searching for a confetti library I could drop in, and ConfettiSwiftUI was a perfect fit for what I needed. As I tested the app, I was a little disappointed in the feel of the confetti pop. If you’re oddly obsessed with lifelike animations (like myself) you’d also notice that the animation curve seemed like more of a straight line. Check out this gif of the original animation:

It doesn’t create an illusion that there is a real confetti cannon firing off does it? I was unhappy with this and decided to play with some physics simulation. After lots of tinkering I came up with something that looked smooth and felt like a real life pop of confetti:

So what were the differences? You can check out my merged pull request here if you like, but the tldr bullet point version is this:

• Added random time variation to each confetti’s initial explosion animation. This way some fly faster and some fly slower to their resting point after the initial explosion.
• Created some overlap between the initial explosion animation & the following gravity/fall animation. In real life gravity is affecting objects the whole time, so this slight overlap adds a little more realism to the animation.
• Changed the initial explosion animation curve from a straight line to an ease-out curve. That means a steep curve at the start, so confetti moves fast at the start of the pop, then the curve flattens out horizontally so the confetti slowly comes to a rest like real paper slowed down by air friction.
• Improved randomness in confetti explosion distance. This may have been my favorite part due to the cool math. We take a random decimal from 0.1 to 1, and then give it a fractional exponent that’s between zero and one (I ended up using 2/7 as the exponent since that felt just about right). What does that even mean?? Basically it pushes the shortest distances (closest to 0.1) outwards by a larger factor than numbers already close to 1. Try it on a calculator! This takes an otherwise even distribution of confetti & thins out the middle while concentrating most of the confetti towards the outer radius that the user chose for the confetti cannon.

Hopefully you learned something cool here, or just got a laugh at how long my tldr version was 👀

See you next time!