The World of On Chain Generative NFT's Emily Williams

cool thanks nicole yeah so i'm gonna do this is kind of a high level tech talk on um on chain art nfts so intro to on chain art nfts um yeah so like maybe when people see this title they might be a bit confused or maybe they're not at all but some people might be because obviously nfts are on chain it's a non-fungible token on the ethereum blockchain however all the stuff that we've come to know and love about art nfts like the picture and i love crypto coven so like the witch's name and her description and the properties all that stuff actually lives completely off chain and in a lot of cases on like normal web 2 api servers in other cases other decentralized storage more like web3 approaches like ipfs or skynet or arweave and all of those solutions which is a feasible solution in a lot of scenarios um putting things on chain is extremely expensive and for good reason when you put data on chain not only does it cost gas especially a huge picture right that's the big bottleneck but every node that runs the ethereum blockchain has to replicate all that data um so putting pictures on chain would cause you know a lot of bloat um so what is on chain for these are nfts um all of that that is on chain is the logic that pertains to ownership what address has access um to the nft or has rights to do certain things with it or owns it um yeah but today we're going to talk a little bit about how to put art on chain because when it is off chain you know we have the ownership aspect on chain but if all that other information that explains all those nfts if that information gets lost like what do you even own anymore right so it's a bit of a vulnerability but yeah so let's talk about some creative things people are doing to put some art on chain i'm really quick my name is emily williams i work at uniswap as a software engineer i have some socials there and a picture of me i don't really like to post for pictures so that's kind of the only picture i have but yeah so all of this stuff that describes an nft that you see on openc the title the picture that's actually part of the erc 721 optional metadata extension so for the technical spec it's actually not even um a main component but obviously with art nfts it's become like the meat of what an nft really is um so this is the implementation of the optional metadata extension and you'll see token uri is really where all that metadata comes from so everything you see on openc the picture i'm going to refer to that as metadata and what the blockchain returns in most cases is this base uri and then maybe a token id appended and so the blockchain has a link on it but it just is pointing to something external and that's where all the art lives for 99.999 of nft projects and so a popular nft is poe app you may have gotten a pull up for attending an ethereum event and this is kind of like an arbitrary data token uri for an arbitrary um app and so the metadata extension will return json and kind of the important components here like the name and the description and the image and then like all the properties and attributes and stuff like that but how do we put this on chain um and that's what this talk is about so there are kind of two main i think components that we can switch up to get this stuff in from external servers to on chain and one of them is using data urls instead of you know links that point elsewhere and the other is svg formatted images that can be efficient enough to store on chain so first using on-chain data urls a data url is a url that instead of pointing elsewhere it actually has all the information inside of it that is needed to render for the browser to render it and so these are two examples of a hello world data url if you plug that into your browser you'll see hello world and plain text this is base64 encoded it would render the same thing on chain most of the time we use base64 encoding for this and then the other component is using on-chain svgs svg is an image format that uses html syntax that a program can read to render the image here's a little code snippet this is a blue square so instead of having all those pixels stored it's just like a simpler html the other great thing about svgs is that they're it's really easy to layer them on top of each other so a lot of these projects kind of deploy a lot of different svg components and then when we put the unique nfts together we kind of layer them on top of each other to make unique images so i quickly want to go through about four projects that have done distinct implementations it's kind of tough to fit into 20 minutes but we're going to try i might talk a little fast but just super high level technical overview of a few different projects so obviously the first one i want to start with is what we did at uniswap with our on-chain nft metadata it was my first project at uniswap and it was really fun and so this is the image of it on openc we kind of inject a lot of financial information about an nft liquidity position on our protocol so if you provide liquidity into uniswap you get an nft that claims your ownership if you ever want to come and claim your liquidity back so it actually didn't even really need this optional metadata extension that the art ones use just like the the main technical spec however we thought it would be fun to go in and add that so yeah i talked about this token uri and what we typically return however in our code instead of returning a base url and a token id our token uri function calls into this function called construct token uri and um from the token id we can get all the parameters from your financial position and then inject it into some json we it's kind of like mad libs we kind of posted like a format for the json in the image and then put your specific data in it so you know we put all of the financial information and you can see down here we're starting to form that data url that you see instead of an external link and the images are also links html expects a link for your image and that can also be a data url that represents an svg so when you plug that into your browser our huge data url that you return you get this json you don't really need to read this but it's just like kind of an example of what a big data url looks like they're big and they're ugly but they have all the information that you need to render what you need to render this is base64 encoded our image as you can see the image is like the big part of the this metadata extension and it's why it's hard to store it on chain where storage is super valuable and expensive yeah and so when openc gets this information this is what they render for our position what else oh here's a few more from all different pools um depending on the pool you're in and the tokens it displays a different color and the curve is unique to your position if it's like flat or more curvy or whatever and so okay this is let me go back here really quick um a lot of people ask or a common question is well isn't it so expensive to mint an nft if you're going to be putting all that art on i mean the answer is no a lot of the upfront heavy lifting happens on deploy everything's deployed and then the user kind of can store certain information to get access and i'll talk a little bit more about that with another project but in our code we just have a bunch of svg lines and it's super ugly because solidity wasn't really made for this so um yeah it was just kind of challenging for many different reasons my linter broke i had to get in touch with the linting team because it didn't even understand what was going on but um yeah so all of this is stored up front and you can see like all the images are um all the images actually i don't remember i was gonna say so let's move on um and so to put the information into this big svg function when we're forming that data url we call generate svg image which then we can inject all of that like financial information that we saw that was baked inside the image but a little more fun we also wanted them to be colorful and so how do we put the colors or determine the colors on these nfts and what we did is in html a lot of times colors are represented as three byte hexadecimal and conveniently ethereum addresses are also represented as hex strings so we just took the token addresses from the pool and took snippets from them to then make the colors for the um for the nft so each pool had unique colors but then so that each nft was also unique you can see we kind of have like this tie-dye background so that each one was unique we also used the token id since that's like the unique aspect of each nft they all have a unique token id and use that to generate how those circles would be laid out so that that kind of tie-dye layout was unique for each person really quick this is the function that did that but you can just the slides will be available yeah and so that's the unistop one um and then another project i want to talk about with animal coloring book wilson works on a lot of nft projects where like the image will change depending on how you're interacting with it on chain so in this project an image gets built as the nft gets transferred to different owner addresses and the new owner addresses determine the future colors and the personality of these images so when you first mint it's a blank slate but then as you transfer it around to different addresses the first four transfer addresses the new owners get saved in storage and later when we're going in to extract the image it looks at those addresses and just like similar to what we did uses the hex strings to determine colors um yeah and so let's talk about another on-chain nft project i also got to work on this one this one's called shield and in this project you get to mint yourself a build pass so when you first mint your nft it um it comes up as this build pass and if you're the owner it gives you the right to then um build your own custom shield all of these shields that i'm showing right here were all rendered from the ethereum blockchain and they were customized by shield holders and the way that we did this is we deployed kind of there's three layers like we talked about layering svgs there's this background and then the hardware which is this metal plated object and then the frame and so we deployed all of these components on chain and then the users get to pick their colors their background and objects and then it kind of gets layered together for each unique nft and not only that but the title would also be generated dynamically depending on what what colors and all the attributes that you chose for your shield so all of that kind of gets generated when you call the token uri view function it does a lot of work to go collect all these layers and then render it for the user so like i said storage is really expensive and i think we deployed about um 500 svg images in total for all those layers and it ended up being a deploy cost of about 24 e for all the svg contracts you can kind of see this is a directory with like all the contracts for all the svgs that we had and it was a little ridiculous um but yeah so but because it's so expensive to put this stuff on chain we decided to make it super easy to interact with these contracts that if people want to use these for other projects those images are already there and it's creative commons it would be fun if like if more products did this we can kind of mix and match and make like endless amounts of cool svg art on chain and this is just a picture of one of the svg functions that you'd go get and i just wanted to illustrate you know we had to optimize the hell out of these svgs and it was super tedious for the design team they spent so much time getting these svgs as small as they could that they eventually turned into something that was pretty not human readable but yeah so that was an interesting process and also we store them in the functions of the contract instead of storage because it's just cheaper to do it that way and so when you build your new shield you know like i said you're not deploying a new image to the blockchain it's actually really cheap all you do when you build your shield is you choose an index that corresponds to the background into the hardware and etc so this is like a shield struct and so really the user when they build their shield is only storing roughly like 160 bits of data which is cheap despite all the cool stuff that it does you know the bulk of the work is done on the deploys for all of these projects then i want to talk about one more variant of on-chain svgs which is on chain pixel generative art which renders these images pixel by pixel and this is another approach that a lot of projects have done it kind of evolved at the same time as this svg layering i was talking about there's a lot of cool projects i have 20 minutes i can only focus on one i have no idea how i'm doing on time but i'll just keep talking fast so i'm going to focus on chain runners which is this green guy right here chain runners one minted code uses the arbitrary data from the mint transaction to construct the chain runner dna which is a 256 bit integer and then the dna gets split up into 13 different parts that determine the different attributes of the chain runner um and by attributes like the hair the eyes the nose the lips like whatever so yeah these are all the layers um and so here's a few that like all have this green hair all have these glasses right everything gets mixed and matched generally without a chain all right so here's the minting functionality when you mint it takes your token id um the sender address some arbitrary stuff to make a pseudo-random number that's going to determine what your code runner is going to look like which is super cool because like when the team deploys the contract like no one knows like as p as it gets minted like what's gonna um what these runners are gonna look like it's it's completely up to like this cryptographic hash which is kind of fun um and then so like i said that we have this huge number that gets split into 13 parts and then when you take your snippet of dna say for hair and then um to determine which like hair you'll have um they have these weights arrays with a race index and then the layer so they have like a humanobot and something else so this is a human and this zero might be hair one might be eyes and what it does is it loops through these weights it basically moves a range up the scale of numbers until you get to the max unit 16. and then as it moves up it sees if your number falls within that range and if it does that's the attribute that you get so it's a really cool way to put the distribution across and you can make things more rare or less rare with these weights arrays which is pretty cool um this is all the way to raise it's like daunting to look at this is in the constructor of the um of the contract and all this kind of gets put to storage um and what else and then the other thing so not only did they have to deploy those weights but then the layers so um after they deployed the contract then there was some follow-up functions that the owner could do to get all of these different layers on chain which they did in storage which is a little different than me which everything was in byte code and then the layer is just like really a bitmap and then they have a function that can decode it and then like put the pixels in the image and also the name it might say green hair and then the bitmap to decode for the pixels um and then just to compare with shields to deploy chain runners they've deployed the contract they put did the constructor put all those weights on chain i'm sorry in storage and then uploaded all the layers and that was about 7.5 eth which was 34k at the time so these projects are super expensive to deploy but they're super fun and you know when you meant a kind of there's a mint cost so the deploy costs i think do generally get made back okay i'm doing really well on time okay well i could have talked about other stuff then i cut so much stuff out because i didn't think i could fit this in 20 minutes once again here's some different pictures of chain runners with all the different attributes and then when you do do pixel by pixel the svg kind of looks like this i actually took this from the crypto punx um contract um and crypto bugs sub crypto punks subsequently also did an on-chain version of their um of their svgs as well um and i actually there was a there's it all really goes with layers of attributes but there was this one attempt to do crypto punks before like the layering and what this guy wanted to do xerox that beef i i credit him later but um what he did is he deployed the first 500 punks and then he subsequently for all the rest of the punks found the one that was most similar to the one he deployed and then rather than deploying the data for every single punk he would deploy like the delta so like for the subsequent punks find the one that's most similar and then he just stored all the um all the all the pixels that were different from that punk um to try and like cut down on the data on chain i thought that was kind of interesting and kind of a unique approach so i wanted to mention it um the crypto punk's official team took inspiration but ended up doing a more of a layering approach like we saw in chain runners um advantages of on-chain metadata i shamelessly took these bullet points straight from this blog post which is a really great blog post if you're into this stuff um recoverable and on chain nft is one that can be recovered entirely from the data on chain on the ethereum node you know you're not you're depending on the security of ethereum layer one instead of like having to spread your dependencies across like other protocols and like ipfs and etc you're depending on the security of many protocols instead of one or a centralized server which could just go down any day um or they can change them any day most projects like if the team want to they could change it but they don't because they have integrity right but i don't know if that's how this is supposed to work summonable an on-chain nft that can put be put to use without any further processing directly on chain if that metadata has anything to do with doing stuff on chain it's available um composable and enchanted fee that can be easily manipulated by other on-chain components such as other contracts in order to integrate extend or modify and then and then evolvable an on-chain nfp that is dynamic and changing with the chain over time i showed you animal coloring book wilson has done other really cool projects that kind of gamify how you move the nft around the chain and how it will render based on that um and those are always really fun and really cool um acknowledgements and people who help me with some ideas for this talk with simon de la ruvie you should definitely follow him john palmer and xerox def b for talking to me about his shane punk's chain punks crypto punks uh implementation someone should make chain punks and here's some cool resources if you're interested in reading up on more of this stuff maybe i can post a link to the slides in my like bio so you can just look for it and i'll try and get a link there or you take a picture but i think that's the end of my talk i can't believe i did that in 20 minutes yay thank you so much emily we have time for questions briefly any questions all right i will come to you q a is scary anyway sorry if you explain this uh so maybe you have to explain to me like i'm a kindergartner but in the music world a lot of pieces of sound are built in libraries then kind of composed you see that happening on chains so that every project doesn't have to deploy aspects to the chain but rather it becomes just massive libraries that you can pull from and compose from yeah i mean ultimately like if we want to put a ton of stuff on chain i don't see any other way of doing it because like you know you obviously don't want to bolt the chain there's lots of scaling solutions i mean maybe layer two will be good for this stuff too there was one music nft project which i thought was weird and they put the little i'm not very good at like knowing the technical technicalities of like music files but just like like an a flat at a certain it's been a long time since i've been in like a like ableton or anything um but you know you have like the sawtooth curve like an a minor like he just put like all of those like different ones on chain and i thought that was interesting because then like people could go and pull those to make songs i know there's some people in here who are really into music nfts i can see them i have less experience with them but i'm sure that there's going to be a lot of cool stuff to come from that but i'm actually not super up to speed on all of it but the one i'm talking about is bleep style or something where he put all the different wave sounds for like little tiny like e a minor all that stuff on chain or a flat whatever but yeah thank you so much everyone give it up for emily williams