Home of Ebyan Alvarez-Buylla

Procedural Space Invaders

Procedural Space Invaders

These simple procedurally-generated Space Invaders-style sprites were directly inspired by Jared Tarbell’s classic Invader Fractal. The concept is straightforward: start with a grid of a set width and height (3×5 works well), and mirror on the x all tiles except for the center one. You can see it in action here and grab the source code from GitHub.

My initial interpretation of this algorithm, which yielded my Twitter background, was in AS3, and seeing as that was nowhere to be found, I figured I’d whip something up in JavaScript instead. This implementation is generalized to work with an arbitrary width and height, and is designed to produce every possible Space Invader from fully blank, to fully filled.

Rather than randomizing the Invaders’ values, I encode each one using an index, which is an int containing a total of width*height bits (0 is off, 1 is on, as you would expect). For a 3×5 grid, this results in 215=32,768 unique Invaders. I’ve added a colorization callback, as well as multiple parameters for dimensions, size, padding, etc, so you can end up with all sorts of variations, such as this nifty set of 5x7s:


Or these gnarly 6x8s: