Procedural Asteroids

I created a specialized tool that allows the user to generate asteroid-like shapes and rasterizes them into pixel art. These sprites are then automatically loaded into the game and sorted based on size!

I wanted to incorporate asteroids of different sizes to bring variety to the game I was creating. However, I encountered a dilemma. If I didn't want to redraw the asteroids for each size, I would have to stretch the pixel art, resulting in different pixel sizes, which my insistence on pixel perfection would not allow. Hence, I developed a tool that enables designers to produce unique asteroids in various sizes while maintaining consistent pixel dimensions.

Why not automate this process during runtime and avoid the need for manual intervention?

Pixel art is a deliberate form of art where each pixel is placed where it’s supposed to be, and I wanted to maintain control over the final result. Generating new asteroids are as quick as the click of a button so production time is not affected.

How do we generate a "good" random outline? There are many ways to go about a problem like this, such as sine waves, noise, intersecting shapes, but I decided to take another approach and generate these outlines using splines, specifically cubic splines. The process is computationally relatively cheap and allows for various shapes, jagged or smooth, and most importantly can be scaled and altered after they've been created, without losing information, since they're purely mathematical. For those unaware of what a spline is: A spline is a mathematical way to define a curve between point A and point B. If you then put those points together, you get an enclosed shape with curves!

The process starts by creating anchor points equal to the detail you want. These anchor points are then moved closer or further apart from each other, randomly, based on the settings in the tool. For each anchor point, we define two tangents that will define the curve of the line segments to the left and right of the anchor point, which are then randomized to create the curved spline. The splines are still just mathematical and are defined as points within a unit square. We then take those unit points and convert them to pixel positions. Now we have our outline!

The second part of the puzzle is the texturization of the asteroid. I decided that keeping it simple and using pre-existing textures would be the best and quickest solution. Scaling, tiling, and rotating the textures would still give the impression that the asteroid is unique. And if at any point I felt that the texture became too repetitive, I would like to switch it out. I created a system that creates a pixelated texture from a height map and divides it into three color segments based on the height value from the original texture. This texture is then used to "fill" the outline that we've created, and our asteroid is done.

Finally when our weirdly colored asteroid is being rendered in the scene, a Lut is being applied to color it in.

Controls:

W: Move towards the mouse Space: Dash towards mouse LMB: Single fire RMB: Burst fire