It’s interactive! Click here to try it out for yourself!
This virtual “mirror” is an early experiment with the capabilities of P5.js and image facial tracking using the CLM Tracker javascript library. I developed a unique style of rendering that uses corn kernels as pixels, toggling them between their natural corny state and this pea-green color. What’s interesting about this technique is that that a mesh of kernels on-the-cob is arranged hexagonally, rather than in a uniform grid. This meant I had to develop a way of translating a 2D pixel space, to a similar but subtly different hex pixel space.
The resulting effect is humble but expressive – beyond tracking face position, it will respond to tilting of the head and will blink anytime that you do. There was an early iteration of this design that also changed the scale of the face depending how far the user was from the camera, but I think ultimately the single size arrangement is more elegant and speaks more to this bizarre abstraction.
I used a stock photo from this website. In photoshop I was able to create three different frames containing “on” kernels spaced with enough room between them so that I could apply loose masks to display a single kernel at a time.
By using a rough mask I could isolate each kernel with enough room for variation so that the same mask could be used for each kernel while still getting precise edges.
Having never worked in hexagonal pixel space before, I made an educated guess and opted to store the pixel data as 2d arrays. It actually ended up being more difficult because I had to compensate for the offset columns of kernels, but I found a work around for this. Especially with smaller, lower resolution sprites like this, even the difference of half of a pixel can make a big difference. I had to save two copies of each sprite so that when the 2d arrays are converted to the hexagonal pixels there isn’t any inconsistency.
The following are a few sketches of the sprites. I thought about making the design rotate about a sort of sphere but I decided to keep the illusion 2-dimensional.
HUW MESSIE 