Enter Processing

Yes! I found a way to include a Processing application as part of this project, much like my esteemed peer Ben Richards. While fiddling with Illustrator trying to figure out a way to compose hexagon-based forms quickly, it hit me than converting regular symbols and imagery into hexagons is something Processing could probably do for me, and with far more flexibility. Even with the potential for animation! So I set about writing this very app.

I call it Hexagonize. There is not much agonizing involved, so its not a clever pun or anything, but not everything can be a clever pun sadly.

The essence of the app is to take an input image, sample hexagonal areas of that image (that tessellate), and then place hexagons there. I actually cheat, and just use squares that approximate the hexagons, but it makes little difference. Early versions had a brightness threshold, and if the average brightness of all pixels in that area was low enough it would plonk a black hex down there. This made for interesting symbols, but it was poor for images, so I improved it first to draw a greyscale hex representing the average brightness.

Don't judge my choice of images, if you have to stare at pixels a lot when writing image analysis apps, it's nice to look at something pretty. :D

I moved on from this to colour, and accidentally learned something about greyscale in the process. It turns out that HSB colour systems are terrible at perceived brightness, so just modifying the saturation value of a colour over a whole image will give you a much worse (less contrasty) result than the Hue/Saturation/Lightness adjustment tools that Photoshop-like applications give you. They are doing different maths to juggle the other values when you shunt that Saturation slider all the way to greysville.

Anyway.

I added controls for the hex edges as well, because for some images you want to really know its hexs, and for others they look great borderless. There are controls for moving the hex field about to, just so you can force it to resample in a slightly offset location (I thought this might come in handy later).

Yeah I had fun plugging random images from the internet into it.

When I started trying to apply this hexagonising to the actual images I wanted to use as my effect, I ran into some issues with text readability. Everything looks cooler in low res, but text needs to be mighty large.

I chose then to simplify further, and have the graphic just be the number 16, but have that number be very interesting to look at, and arrive in an animated way. I had built animation potential into the program already, so that wasn't too bad. Basically I just set the hex field to automatically drift left, and it re-samples every frame. The shimmery effect from this is very interesting on some images at some resolutions, worth exploring another time I think. The most interesting accident from playing with this is illustrated in the animated GIF below.

With any image I had containing rain, it seemed to animate the rain. This works even in images containing people and other objects which shouldn't be moving, the rain animates around them, while their edges only shimmer. I suspect this is just to do with how our eyes read images, and the size of colour blocks, details, edge detection, feature size, that kinda thing. The best example I ran into of this effect containing a person is a little *ahem* risque, so I won't post it here, but ask me if you are curious.