Creating generative animated PFPs using After Effects
0xC9d1
January 27th, 2022

Yesterday @whatthefurr (Joe) and I (@tmw_buidls / Tom) launched the first teaser of The Possessed; an NFT collection of generative animated characters. I’m biased but I think they’re f*cking based

Joe is the artist, I am the dev. In a world of rugs, hacks and scams we want to be transparent from the outset about who we are, what we’re building, why and how. This is how we believe NFT projects should be built. We’ll post more about ourselves in the future; but first I want to focus on the art.

Each of the Possessed is made up of hand drawn traits, edited in Illustrator and animated in After Effects. Each trait has a human state and a possessed state.

After animating each one of these in After Effects, we needed to generatively combine traits together in order to create each unique character. To do this we turned to Lottie. It’s is an open source animation file format built for the web and therefore interactable with Javascript; and it has a plugin for After Effects. Using this plugin we export each trait to a Lottie JSON file and then merge them back together programmatically.

Easy right? I thought so, but Lottie file formats are complicated and so like great devs do, I turned to Google: “how to merge Lottie files together”. Apparently we’re the first people to do this… or at least write about it.

An efficient but unreadable file format

Lottie files are not optimised for readability. Things like the animation timings are stored in very unhelpful variable names such as op and ip… Although at least assets and layers were obvious enough and clearly what I needed to merge. Ok, so all I need to do is:

  • Group traits together with their Lottie files
  • Loop through each trait and pick a value
  • For each trait merge the assets and layers into the final Lottie file

What the?! Where are the..? Argh, apparently 0 is the top layer… I need to reverse the order I loop through traits in.

WHY ISN’T THIS WORKING?!

*returns from walk*

Looks like assets and layers are linked by an ID, so that each layer knows what asset to animate, makes sense. Apparently when you export these files from After Effects the IDs for each trait are exactly the same. Makes less sense. Time to re-map the IDs. For a while I tried to be fancy and loop through the nested hellhole of incomprehensible variable names. But I was trying to be smart when the dumb approach was better:

  1. Turn the trait’s Lottie file into a String
  2. Find and replace the ID with a unique trait ID
  3. Turn the String back into JSON

Success! Right now have 32 traits across 8 categories which generates 40,320 unique characters. Math is cool. But this still isn’t enough variants for us to be happy. We want every single one of The Possessed to look different (not just be different) and, of course, some traits to be rarer than others.

Want to see when we create new traits? Want to come along on our ride as we post about Dev, Design, Roadmap decisions and more? Follow @ThePossessedNFT @whatthefurr and @tmw_buidls.

And if you like this, share it and I’ll write more.

Arweave TX
DpQHSwA7jWXQUdMyQJaDDa-h6o4c-F7Q59vD1aCzEp4
Ethereum Address
0xC9d13Bdcf27B24569d02D28411a9F20852fA8A0a
Content Digest
c0I_fNwdRlETttwAh8fAw518hKOyOAqFDBKR6p_1pbI