4k media (“Ultra HD”) is the new big thing. YouTube and Netflix now offer 4k video streaming, cell phones such as the iPhone 7 can now record 4k video, gaming consoles such as the PlayStation 4 Pro can play video games in native 4k, and 4k-compatible computer monitors and television sets are now priced reasonably.
However, the improvements offered by 4k do not come for free. From 1080p, 4k media requires much more resources to store the media on disk, much more resources to read from disk or stream over the Internet, and much more resources to store in memory. And Moore’s Law has been slowing down.
Another option worth considering in light of these potential constraints is vector graphics, which can be scaled to any resolution at a significant fraction of the storage space. Although graphic formats such as Scalable Vector Graphics (SVG) have existed long before 4k media (and even 1080p media), support for it had died out over the years since JPGs and PNGs were more practical for the 1024x768px screens of the day, and older versions of Internet Explorer did not support SVGs. However, creating complex SVGs is not trivial, and there aren’t any magic applications that can convert a normal image into vector graphics automatically (the closest is potrace, which only works for one color).
Primitive, an open-source project by Michael Fogleman, is a cross-platform command-line application that creates abstract art by taking simple polygons such as triangles and rectangles and placing them such that the group of polygons is as close as possible to the original image. The Twitter account @PrimitivePic posts examples of such images every half hour.
The Primitive application on the Mac App Store, also by Fogleman, provides a simple user interface for the application for $9.99 (worth it for the productivity increase over fiddling with the command-line). With this GUI, you can see exactly how the art is being made, in real time. The app has also been financially successful for a side project.
Both interfaces allow for SVG export, which means that we can use Primitive to take small images and scale them indefinitely.
But what cool things can you do with these fancy SVGs? Let’s take a look.
Playing with Primitive
This PNG image is 672 KB. Let’s try running it through Primitive to see if we can make it smaller, and make it cooler by drawing 50 quadrilaterals (with zero transparency), at the 1024px “nicest” working size for maximum quality.
Now that is definitely minimalistic. Maybe too abstract. What happens if we want to add detail? We can do that by adding many quadratic Bèzier curves. Let’s add 500 solid curves to this image.
Now that looks fancy, is only 94 KB (about 1/8th the file size of the static image!), and can scale to any screen size.
You may have noticed that this SVG is the final result from the animation at the beginning of this article. This particular shenanigan is another of my trademark weird-tricks-that-should-not-even-work-but-do. By passing the final SVG through Vivus (specifically, Vivus Instant), we can animate the Bèzier curves such that it looks like they are being drawn in real time on the quadrilateral background.
The animations generated from Vivus Instant are pure CSS and require no additional dependencies (although you’ll need to manually add the
viewBox attribute to make the SVG mobile-friendly). Even then, the result is 276 KB; still much smaller than the original raster image!
Of the polygons available in Primitive, Vivus Instant will only animate the Bèzier curves. If you wanted to animate other polygons, you could use Snap.svg, which might make a fun project for a future post.
These SVG animations only work on the web, but it’s not difficult to make animations of SVG creation into a share-friendly format.
GIFs nowadays can be shared anywhere, and Primitive has a few ways of making GIFs. The command-line interface has a GIF-maker built in; essentially, it outputs each frame as an image and stitches them together.
The Primitive Mac App has another option. Since the polygons are rendered on-screen, you can record the screen using tools like QuickTime’s screen recording to simultaneously visualize and record the vector image. Once recorded (and after editing the video to speed things up), you can use one of any number of video-to-GIF converters to make a sharable animation.
For this test, let’s try using an extremely small image and see how well Primitive can extrapolate to an infinite size. Here’s a 64x64px sprite of the Pokèmon Pikachu from the 3rd generation of Pokèmon games (via Bulbapedia).
I made a video of Primitive rendering Pikachu using a combination of 1,000 ellipses, rectangles, triangles and curves, and converted it to a GIF using my noncreatively-named Convert Video to GIF tool. The result?
Not too bad, given the input. Again, the GIF can be sized to any resolution, bandwidth considerations aside.
Abstract 4k Videos
So how do you get these infinite-quality images into 4k videos? You can export the Primitive renderings as a super-high-resolution PNG and embed them into the video, but there may still be pixellation if you cinematically zoom into the image. SVGs aren’t natively supported by video editing programs such as Final Cut Pro and Adobe Premiere. But PDFs are, and there are many SVG-to-PDF converters which preserve the vector information (On macOS, Gapplin works fine for this purpose).
For vector scaling in Final Cut Pro, you must first import through Motion first. Here’s a quick 4k/60fps video as proof using the Ferry Building vector image above, with a bit of style.
Again, vector images are not a new concept, but given the changes in the media and technology landscape, it is very worthwhile to give them a second chance. Once technology evolves and the media industries start pushing 8k media (and they will), having a sensible method of producing high-quality assets pays for itself.
At the least, Primitive will give me some nice background visuals for when I start producing 4k data visualizations videos (yes, that’s a thing!).