procgen: build dreams, see beauty, learn to think

Color Maps

Color maps are an abstraction born for working with images, but can be applied in other situations as well. Let's start with color maps that are simply images, i.e. the map is an assignment of pixels to colors, specified by the data of an image.

Repainting an Image: Pixel Running and Radial Sampling

In both of the following processes we'll do the same thing. First we take an image, which to us is a grid of pixels. Next, we make a fresh canvas and go over each of the pixels in that canvas. We use something from the original image to help us pick a color for each pixel.

Pixel Running is a process which gives a streak-like effect to an image:
For each row, starting at the left edge, take the color of the current pixel (in the image) and copy it some number of times to the right. Take the color of the pixel where it stopped and copy that color some number of times. Play with the slider to get a sense of how the maximum length changes the effect, or use a constant length to see how it blockifies the image.

See the Pen Pixel Data Runner by George Hoqqanen (@hoqqanen) on CodePen.

Radial Sampling on the other hand gives a blurred, grainy effect:
For every pixel, pick a random nearby pixel in the corresponding image and color it with that color. If the maximum distance is 0, then only that same pixel will be chosen and the image recreated. If the distance is large, things get noisier. Play with the radius yourself to see.

See the Pen Pixel Data Radial by George Hoqqanen (@hoqqanen) on CodePen.

Rotating pixels allows us to create a wave within the image.

See the Pen Pixel Data Spiral by George Hoqqanen (@hoqqanen) on CodePen.


Here we take 2 or 4 source images and interleave them so that each little 2x2 pixel block features pixels from each. If we used an all-white and all-black image, this would generate a very fine checkerboard. We can change the block size to make a larger checkerboard and make something of a quilt out of chunks of the images.

See the Pen Interlacer by George Hoqqanen (@hoqqanen) on CodePen.


If you haven't looked at this process already, head on over to the diffusion page.

See the Pen Diffusion Variants by George Hoqqanen (@hoqqanen) on CodePen.


So far we've explored how to use image data as a color map, and some of the processes that can be applied to such a map. We can use maps other than images though. For example, we can define color maps through pure functions! What's more, we can use a latent color map to sample colors of objects (beyond pixels) in the canvas that we wish to color. If we define a color map which evolves through time, this can give objects a color which evolves.