There are so many places to add FX and polish, and this week I found myself drawn to the unassuming progress bar. It’s a great warmup before tackling heavier pieces, and it’s always worth adding a bit of delight wherever you can.
These bars use a technique I like to call frequency fighting. I’m a sucker for color math, and it’s amazing how far simple adds and multiplies can go. Even better, some of the nicest results come from frequencies based on the golden ratio (1 : 0.618). I figured I’d share a bit of that rabbit hole.
Mod 2x
“Mod 2x” is a term from way back (not sure what the modern phrasing is), but the idea is simple:
Texture A × Texture B × 2
Quick refresher for thinking in color:
- Black = 0
- White = 1
- Everything else = a value in between
This has some super cool properties already:
- Anything * Black = black
- Anything * White = itself
- 0.5 grey * 0.5 grey = 0.25 grey (mid tones get darker)
That last bit is where the magic happens. All we have to do is multiply by 2, and what was .5 * .5 now gets you .5 back. That means instead of just darkening, you get a contrast-preserving blend with energy in the highlights. This is a core building block behind a lot of MoteMancer’s FX.
If you think in curves: the input value (x-axis) becomes the output (y-axis). A straight line means no change. Bending the curve shifts brightness and contrast across the range. That mental model helped me more than anything else.
Here’s a quick visual:
A World of Color
The above examples are just black and white, but color is where things get even more fun. MoteMancer has 6 Elements, plus Salt and Entropy as the core kits for the game. Each of these kits has a unique mechanical style, and so while making progress bars for each, we aren't just capturing color, we're capturing the emotional and textural vibe as well.
Here are a few examples:
(Steam was being temperamental so you'll have to see the animated versions in game)
There's a small trick I do here too where the bar slowly gets brighter towards the end of progress, just to elevate the anticipation a smidge. Lots of little details go a long way.
There's no end to the amount of effort you can throw into these, but your focus should always be on big broad strokes first and then fine-tuning the details after all the pieces are in place. Usually I like to get things in a spot that I like and then come back to it later to see if I agree with my past decisions with a fresh set of eyes.
All That Glitters
There are lots more FX coming, and soon I'll get to leverage this technique into another one of the most powerful use cases: multi-texture particles. I might even do a full dive on the golden ratio at some point, making this reminded me of that personal fascination. We'll save those for another day though, for now back to building.
Back to the Lab 🌿
~CyanAvatar