trenchant.org

by adam mathes
archive · subscribe

Simulating Constrained Retrocomputing Color Palettes in iOS

I’m a graphics programming neophyte so there’s probably better and more accurate ways to create the low resolution, low color palette effects I used in the Belowrez pixel camera app, but here’s how I did it.

This is technical and boring, but feel free skip to the somewhat more interesting visuals at the end.

For examples of what the app actually does see belowrez.tumblr.com.

GPUImage

GPUImage is a framework to easily use OpenGL shaders and other GPU-based processing in Mac and iOS programs. This makes it feasible to show the effects in realtime on a phone.

Decreasing the resolution of an image using a pixelate filter was easy using a pixellate filter.

Decreasing the color depth to match older systems was a little more complicated.

4 Colors

GPUImage includes a CGA colorspace effect implemented which calculates the distance between the input color and 4 colors in CGA Palette 1 and chooses the closest.

This was fine for small colorspaces but struck me as impractical/inefficient for larger ones.

Color Lookup Tables

There’s other ways to calculate how a large color space maps to a smaller fixed palettes, but I went with a color lookup table using the tools already in GPUImageLookupFilter, more on that from its creator.

Color lookup tables are a neat little hack: it uses a texture image as a map between input and output colors. I pre-calculated how each possible color in the full color space translates to the smaller color space, so for any given color the program just has to sample a specific point in the texture to determine what color to use. Clever!

To create these lookup tables I wrote a little python script that given a palette image that has all the possible colors you’d need, rips the colors out and generates a color lookup table with the closest color in that more limited palette. (That may not be the best logic for that, but seemed to work well enough for my purposes.)

generate_clut.py gist on github

Some old system palettes are more complicated to simulate accurately because they often allow N colors but only a fraction of them on screen at once. In these cases I generally took the larger palette or the default subset. This is fine for a little camera app but not a totally accurate simulation for purists.

For an accessible and entertaining explanation of palettes in video games and some cool history, see Christine Love’s Fuck the Super Game Boy series.

Results

The lookup tables themselves are fun to look at and provide a way of visualizing color spaces you don’t normally get from just looking at a single sample image like on Wikipedia.

Here’s the “identity” color lookup table followed by the lookup tables for a few other systems.

EGA Default Palette

Nintendo Entertainment System

Sega Master System

VGA

· · ·

If you enjoyed this post, please join my mailing list