“Quine” by Larva Labs
A couple months ago, when I was first planning to go independent again, I ran into my friend, John Watkinson, on the walk home from my studio. John is half of Larva Labs along with my good friend, Matt Hall, and they’re responsible for industry-defining projects, like CryptoPunks and Autoglyphs. I actually sat next to them when they were first working on CryptoPunks, and they asked if I wanted to have any. I remember telling them that I was too busy working on Cushion to be bothered. So that was cool. In any case, we caught up for a bit and I mentioned my plans to return to freelance life. John had an immediate lightbulb reaction, as if this was perfect timing—and it was. It turns out Matt and John were weeks away from announcing a new project, and they were looking for someone to animate it.
A quine at 100% scale
Matt invited me over to their studio, where they told me about Quine. In their words, “Quine is a generative art project that blurs the line between its code and the art it produces.” At first, these quines just look like cool procedurally-generated pixel art. And, while that’s true, if you look closer, you’ll see that there’s real code embedded within each quine. Matt explained to me that if you extract the code and run it, it’ll generate the next variation of that quine’s sequence. I was immediately intrigued from that concept alone, but it goes even deeper than that.
Each quine has a number of characteristics, including one that Matt and John refer to as its “quinity”. This can be a 3-Quine, a 5-Quine, a 7-Quine, etc. Basically, the quinity relates to the quine’s generation loop. For a 3-Quine, if you would repeatedly extract and run the code within each quine generation, after the third generation, it’ll loop back to the beginning. A 5-Quine will loop after the fifth generation, etc. As an engineer, I caught myself chuckling and shaking my head at how cool and clever this is. And, if you’re a sucker for collectibles, it gets even more interesting. Apparently, there are two very rare types of quines, known as a “Perfect-Quines” and “Pseudo-Quines”. Perfect-Quines, when executed, will only ever recreate themselves. And, Pseudo-Quines will generate an effectively infinite number of generations without ever looping. At this point, I went from intrigued to hooked.
So, where does animation come into play? If the written explanation of Quine had you seeing the math meme, you’re not alone. Sometimes the easiest way to explain something complex is through visuals. Matt and John thought that an animation simulating the generation process would go a long way to demonstrate the overall concept. That’s where I come in.
At its core, the code that generates and is embedded within each quine is JavaScript, and when executed, this code generates an SVG. Coincidentally, I happen to have a ton of experience animating SVGs from my time at Stripe, so I’m right at home with this project. The SVGs that make up these quines, however, are very dense to say the least. Each quine is 1440x2560 pixels in dimension, and the squares that construct each quine are 14x14 pixels with a 2-pixel gap between them. This means that a single quine as an SVG could potentially have up to 14,400
Video tag not supported. Download the video here. Performance testing
I started by testing the extreme—animating all the shapes individually. I had no intention of actually running with this approach, and I knew it would perform the slowest, but I still wanted to establish a baseline to gauge how slow this would be—surprisingly, not bad! I then tried animating the text that would represent the code. Instead of animating the positions again, I focused on transforming scale. Again, not bad! Next, I tested the more realistic approach—animating elements as groups. This would certainly improve performance because I’m not only animating a single layer, but I’m also avoiding the iteration loop on every element. Lastly, I tested animating groups of elements that are layered behind text. Because of the flat nature of
Video tag not supported. Download the video here. Quine printing variations
... continue reading