Type: Tech demo
Release year: 2017
See it live here
At the time of writing this entry (2020), variable font is still a new technology and I see more experimental demonstrations than commercial products. Inspired by Lawrence Penney’s recreation of Muybridge’s horse, I too wanted to see how much I could push the technology by basically recreating an animated GIF.
In the simplest model of variable font interpolation, you have a start point and end point. That’s only two masters, or two frames if you will, and all you can do is to blend between the two. However, you can add inbetween frames as many times as you want. That’s easy enough, but you cannot animate objects if you are trying to mimic GIF animation. You need to interpolate by pixel rather than objects in the animation, therefore I decided to control the pixel colour by its size. And each frame ended up containing thousands of rectangles.
So far so good, but how do you recreate RGB colour values? We have colour font formats, and we know that we can interpolate coloured outlines in variable font. What we can’t do however is to interpolate colour values; you cannot interpolate from yellow path to green path, but each object needs to stay in one colour. My solution was to isolate colour values to RGB much like each LCD pixel, and store each channel in separate glyphs. The way it translates colour values to size needs a little consideration as you need to match the colour to the area, not dimensions. Also, use of fractional node coordinates are not allowed in TrueType if not mistaken, which is why the monochrome version features rotating squares in order to prioritise accurate square size. In the case of RGB ones, sub pixels only change in vertical sizes.
The each of RGB channels are separated into the glyphs A B C, and coloured on the application side. A has the full canvas width, while that of B and C are set to zero. Of course it could have been implemented using COLR/CPAL if I wanted to, but I preferred more basic tech this time, which is more fun in a sense.
The test font worked perfectly thanks to retina display, even on mobile phones (though it made mobile devices cry in terms of performance). It’s amazing to think that a font can contain a movie, though terribly inefficient. Perhaps it’s also possible to contain audio waves as outlines and play it too?
It’s a font but not a typeface. Hence the categorisation here.