In: Dev , Django On : Mon 16 May 2016

In Internet discussions, showing user icons really helps to show who’s saying what. Humans need more time to read a users name than they need to recognize a picture. As the old saying goes: a picture is worth a thousand words - that’s quite an impressive compression ratio.

Many users can’t be bothered with uploading a photographs of themselves. To work around that - a site can use Gravatar, or some other automated avatar service. Gravatar is a project which assigns a unique image to every user. While users can choose override the image, by default it generates an image that’s quite unique.

Recently I was working on a project where some legal case goes through a workflow. It would be helpful for users to visually recognize the case. Of course, we show the case number and a case name. To help users recognize the cases faster, and to add some visual appeal to the otherwise boring case files, we decided to generate a unique visual indicator per case file.

In this application, each workflow page had a header containing basic case details. We gave each of those headers a different background image, and on case lists, we added a small indicator with the same pattern.

Automatic image generation

Of course, I couldn’t be bothered with creating unique images for every case, so I chose to generate the images automatically. Each image is generated using a seed (the case number), which is used to create a random number generator. With this random number generator, a basic tiling pattern is selected. Currently there are 9 patterns:

After a tiling pattern is chosen, the items in the pattern are shuffled around a bit, either by applying a crumble, bend, or zoom effect, or a combination of those.

Once the geometric layout is definitive, it is time to choose a color scheme. Currently there are three: monochromatic, two complementing colors, or to adjacent colors.

By themselves, these color schemes would look quite boring, so they are visually livened with some spatial color mutations. For each coordinate, the color is changed a little with random blotchiness on any of the HLS values, a vignette effect, a psychedelic hue shift or some combination of those.

Open source

I named the project PanAvatar, an uploaded it on pypi. The source is published under MIT license on GitHub. Feel free to suggest additional features.