Tech Talk: Voronoi in Action
In Ctrl Alt Deal, we use a custom visual shader we call Voronoi, based on the concept of a Voronoi diagram. A Voronoi diagram is a plane partitioned into cells based on which points they are closest to. This is what creates the core visual background of the game. Following this, we then build upon the plane with additional effects like creating a visual focus, applying height, and creating motion. As with any system, however, you are bound to run into problems, which is what this Dev Blog is about.
One of these problems was that, if left running for a while, our Voronoi visuals would actually start accelerating. This was especially problematic at conventions, where the devices running our game could be left running for hours. To fix this, we had to delve deep.
If you sit and watch the beautiful Voronoi visuals, you might notice that it looks like it’s moving as we shift the noise image around to add a nice visual effect, but noise files inherently don’t loop. How do we move the noise file around to create a motion while ensuring it loops? We rotate it. We have a large file with a center point that it rotates around. This means that, as time progresses, it can move smoothly.
To perform this rotation, we keep track of an angle offset and increase it over time at a linear rate and therein lies the problem.
In our code, we use the angle offset in two ways. Without disclosing the secret sauce, we pass in two values, one being the raw value, and one being the value multiplied by an additional factor. These values are then used to get an angled vector, which we use to derive our points. This is where our first problem occurs, because, as the angle offset increases, the discrepancy between the raw value and the multiplied value increases, creating abnormal effects as time passes. To solve this, we needed to adjust how the value increased. Since sine and cosine repeat after every full rotation, we instead took the raw value and shifted it. This means it would start at a multiple of -2 pi and increase to the same, now positive, multiple of 2 pi, and then snap back to the multiple of -2 pi. This means that when used in a trigonometric function, the behaviour, no matter the factor applied, would be more consistent over time. They get equally far apart and then back together.
However, this brand-new loop created some visual jitter due to how we use it. Initially, we were multiplying the angle offset with the UV values, but this meant there was no common looping point. The period of the trigonometric function would differ based on the point being calculated, changing the loop point. This can be visualized with a graph as the UV values change and the discrepancy in the loop changes.
To fix this, we instead changed it to add to the UV value. This changed it to act more like a phase shift, which allowed for much more consistent looping behaviour, no matter the UV value.
After making this change, the result is a much smoother behaviour as time increases it remains consistent and predictable, giving us the behaviour you see in the game.
If you want to see the updated Voronoi in action, check out the demo of Ctrl Alt Deal on Steam and wishlist today!