Web2 CTO |||||| Web3 Buidler
Web2 CTO |||||| Web3 Buidler
Subscribe to tmw
Subscribe to tmw
Share Dialog
Share Dialog
<100 subscribers
<100 subscribers
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
https://twitter.com/ThePossessedNFT/status/1486407373623341058
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.
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
https://twitter.com/ThePossessedNFT/status/1486407373623341058
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.
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:
Turn the trait’s Lottie file into a String
Find and replace the ID with a unique trait ID
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.
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:
Turn the trait’s Lottie file into a String
Find and replace the ID with a unique trait ID
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.
No activity yet