Hexagonal approximations to images

June 21, 2020


In this note, we will see how to use the basic hexagonal grid we rendered in the previous note to make images interactive. The technique we use here is to render a basic hexagonal grid and then modify its fill colors to match the colors the image we want to load.

The technique has many possible applications. One could use it to make a cartoonish version of a real image to use, for example, in a game. One could also use it as the basis of an image annotation and segmentation service for Machine Learning purposes.

We start with this picture of my cat, Pepper. Isn't she amazing?

Pepper, my tortoiseshell cat

The idea is simple - we just map the pixels of the source image (sufficiently downsampled depending on the level of coarseness we want our grid to have) to certain points on each hexagon in the grid. In the case of this page, I used the six vertices of each hexagon, as well as the additional points lying at the intersections of:

  1. The vertical lines through the vertices of the hexagon that are not incident to the horizontal line through its centroid.
  2. The horizontal lines through all the vertices of the hexagon.

With the mapping made, we take the average RGB values of the corresponding pixels of the image as the fill color for each hexagon.

To see the implementation of this algorithm, inspect the source to this page in your browser and look at the script defined in the header.

Here is a realistic, interactive, SVG rendering of Pepper on a fine hexagonal grid.

Download SVG

Here is a cartoonish, interactive, SVG rendering of Pepper on a coarse hexagonal grid.

Download SVG