Highlight 🛠️ Code based Generative Art with Highlight - Ishan Ghimire, Sarib Mahmood

foreign [Music] Welcome to our presentation thanks for being here uh we're a highlight so we're a platform to help creators build uh code-based generative art collections so highlight kind of helps creators use no code tooling to deploy collections create data content create a portfolio kind of survey their content on chain but what we're most excited about is code based generative art so we're really inspired by artists like Kim asendorf who's a popular artist in the generative arts space that we're working closely with because uh we're going to be launching a platform at the end of this month so like I said highlight kind of offers no code tooling with this code based generative art you're going to be able to integrate like AI models scans uh we kind of do all the stuff in the background for you to create like beautiful Min pages and all this sort of all these sort of things and this summer we're going to be collaborating with a bunch of artists and Brands just to kind of push the boundaries on codebase sharing of art so open see coinbase obviously our friends at youth Global are some of our partners um so today what we're going to do is we're going to help you kind of like we're gonna walk through what it takes to deploy a collection a code base shared of our collection highlight um and we're going to switch back and forth with like technical explanations of some of the like Cutting Edge like protocol Innovations we've made also some of this uh new stuff that we've developed on the generative Arts side um yeah and so sorry I was going to walk you through that but before we jump into creating a collection I just want to show you like what an end product looks like so if you come to highlight and create a generative art collection we're going to create this kind of like mid page for you so this is kind of like your typical collection on ethereum or on an evm chain and the way that it works is when you mint a token from this collection what we do is we take a bunch of parameters from the transaction the mid transaction like the transaction hash the block hash the token ID the time stamp like all these different sorts of things sorts of things we input it into this script that the artists initially uploaded so the actual like generative Arts script and with that custom input that's unique to your transaction that script is going to Output a unique nft and you're not going to know what the nft looks like before you meet the token so for example you we can like iterate through possible uh outputs so if I press randomize here what's going on is we're just sending in like virtual parameters so we're like virtualizing a transaction so virtual transaction Hash a token ID block hash that sort of thing and we're inputting it into the script that the artist uploaded and this is outputting uh what you see here so this is like an example nft that you could mint uh so before saurabh is going to walk you through actually like deploying a collection like this um we're just going to Mint one so press mint here um this collection is on Gorly it's going to ask me to pay a small fee which I will happily do um and as you can see here we have a pending transaction um and what's happening in the background is highlights going to pick up this transaction and then uh you know pass these mid parameters into the script and then it's going to Output a render through a rendering engine and that metadata is going to get assigned to our token so this should complete it's happening right now um once it completes you can view it on a Marketplace on either scan kind of whatever you want um but you're not going to know what it looks like should sign right about now there we go so that's kind of the output yeah so uh we've already gone through the actual main page what we're going to go through now is actual the creation page of this uh basically how you end up with uh that main page at the end of it uh as we're going through we'll go through the technical details of it um what basically happens in the background to end up or how we capture the image or the trades of the token so I'm going to go ahead and create a collection uh so this is basically we provide uh different like different types of collection goes from generative to series to open Edition limited edition and one up one which is basically auctions uh the one we're going to focusing on is going to be the generative Series so I'm just going to go ahead and create a collection uh the first page you see is basically just um it it basically takes you through what's needed to render uh generative artist one of them is index.html which is basically your art and that's what's rendered in an iframe and then you also have the Highlight gen script which is which I'll go through the details of it but all it does is provide a bunch of of attributes which are related to the transaction the Creator can decide when they want to capture the image the attributes of the token and everything so again there's an example project that you can actually download so you don't have to write this write the script yourself you can just play with it um but yeah let's go ahead I'll just take you through the Gen script so this is basically now so it's going to be open source soon but uh for now it's kind of like in restrictive mode but I'll take you to a few of the methods of the Gen script that it provides so as Asian was mentioning that we basically virtualize a transaction when you actually meant something so we got two methods which are Generate random hash and Generate random address all they do is basically just map through alphabets and create a random transaction so you don't have to actually create a transaction it'll just create a random transaction provided to your script and in the end you can actually see what the output of the art looks like as you keep going down there is so the two main methods that we use here are these are both open source x43 which is a hashing algorithm it's available anywhere in the public repository and then SOC 32 what we do with this algorithm is that when we when you actually call so one of the main methods that you call on the script is random which is which works like math.random if you've ever played with it gives you a random number between zero and one uh but the way we do it is basically it's a pseudo random number generator it takes a seed using these two algorithms and the way it works is if I go to the seed method it's gonna take in so it's going to take in the hash and the token ID to generate a seed and then the seed that gets inputted into the random image generator and you have a random number which basically every time you input the same transaction you'll have the same Arc so what happens is when you mint we basically provide the same transaction hash block hash and all those values so that gets encoded on the Chain so every time you open that URL you'll have the same art on the blockchain in terms of creators the two main methods that creators are usually concerned with are they have to play with or the capture preview and set attributes what they do is basically capture preview is if you've ever gone on openc you've looked at an image up a token that's what capture preview does is that you can actually call this method anytime in your script that tells highlight that you're ready to capture an image for the token we take an image of the token and upload to openc and that stays there and same website attributes we take the attributes we open we basically upload that to openc and then you have that encoded on chain so going back to the creation process I'll just get started with a random script so I have a few bunch of download scripts I'm just going to run through one so I'll take this uh it'll basically upload that to our centralized server and at the same time we use our weave as our decentralized server it uploads that to RB and it stays there for permanency and then for validity of the code again I'll go through yeah so once you land on this page it's basically a test for page uh you have your p5.js Javascript file which renders the art so this is basically what the code renders and then these are trades on this side which we capture in live so if you actually refresh or change the attribute so if I'm going to randomize it the trades are captured using our rendering Engine with the script and a virtual transaction so every time you can so as a Creator you can actually play around with changing the hashes transaction hash block hash and you'll see different different trades and you can just basically validate your art as you want it to be um so again you can not only randomize it you can actually input a custom hash which will come in handy when we go to the next step so if I keep moving forward this is one of the key pieces of the the generative art on addition size you can put it to anything like I'm just gonna go with 20 but this part is what allows the creators to say that they have a set of hashes that they want there are to use so you can have a Creator can say like I want only these 20 setup hashes to use for my art so whenever A Min happens we put we pick randomly from one of those 20 and we assign that to the metadata and that makes sure that whatever the art the Creator wanted is basically just given to one of the collectors uh we'll go through the details of like how that happens but I'll just give a demo of like what that looks like so basically as a Creator you can come here you can say I like the first one so if you click basically add it adds to the selected hashes and you can keep on changing uh generate more tokens they'll take different virtualized transaction and you can keep on adding them so you build a list of transaction hashes that basically the collectors would use for their art um just going back to the the details of it so the way it works is basically you have uh so we've already gone through this part of this is that you have a set of hashes but we have a basically evm data manager which listens to live events on contracts uh whenever event happened let's say a mint happens we pick that event up it processes through our pipeline of transaction service and when it ends up at this service what it does is that it basically knows that a mint happened and what was the transaction of that mint so it grabs the transaction details from the evm chain let's say optimism arbitrum or any of the chains and then it uses those inputs which would be transaction hash block hash token ID and it uses the Mulberry 32 which is again open source algo it inputs those values into the algo and this is again this is the algorithm and then it outputs a number so the number can be whatever your collection size is so let's say I just input a 20 uh if I input these transaction as block hash I'll get a number anywhere between 1 to 20. given that number I'll just use this list of hashes that Creator wanted and just pick one of the transaction hash I'd use that hash for the r a few key things about this this whole process is that uh this algorithm is independently verifiable which means that the algorithm is publicly available the transaction is available on chain you can basically run the same algorithm over and over and get the same output so even though it's running centralized uh you're always free to just verify that you got the art that you were supposed to get the second part is that we guarantee processing of events in order what that means is if you muted a token first let's say you got token id1 and someone has thought token id2 we make sure that the transaction of token id1 guess process or gets the art first then the token id2 that's important because there is a point where a collision can happen so let's say someone gets the created hash number one and another one got the one so you want to make sure that the first one who is the valid recipient of the art gets get set before the other one so this is basically two key details of our algorithm and how it basically assigns the bad data so going back back to it I'm just gonna overthrew it for simplicity's sake I'm just going to discard this so I'll discard the select outputs I'll go through the next step uh this is again another one of the point where the Creator can validate uh what they're actually trying to capture is actually equal to the live view so this is the art being rendered in an iframe on the light view so it can be uh basically anything it can actually right now it's a static image but it can be moving image but the preview image would be the one that that's a PNG or jpeg or something and that's what we capture at runtime and these are the values that the creator has so they can provide a delay so if your script takes longer to run you can say like I wanted to capture up to 20 seconds you can change those values you can change the image resolution and once you validate the art is valid you can go to the next step uh at this point like ishan will come and talk about the details of the protocol sweet thank you sir all right yeah so we ran through all the generative Arts stuff uh Dallas deploy the damn thing so we're gonna uh just configure a bunch of details about the collection configure details about the mint um you know you can deploy this collection on a bunch of evm chains where you support five right now but we're gonna keep adding them for this mint we're just gonna go with square Elite um yeah you can basically customize like whatever you want about the contract add it to the filter registry whatever you want we'll just put in some dummy values for this Waterloo 2023 upload a custom logo that represents a collection and you can also make the tokens on the collection non-transferable and the way that this works is that we have like the collection that you deploy is highly modular so you can swap in like pretty much any Behavior you want to Define how the nfts on your collection operate so coming here um The Collection that you actually deploy is uh it basically can refer to a bunch of modules so almost anything that you want about the collection that you want to modify like the behavior you can so whether that's burns transfers how the metadata is rendered if how the metadata can be updated how the royalties can be updated uh how the nfcs can be minted like what you can have your own custom Smart contracts or use some of our modules and then swap it into the collection and then sort them in and out remove them that sort of thing um so a couple of interesting things about this is one because you're swapping in essentially your own code um you can introduce like any Behavior right so like any conceivable like Logic on chain you can swap it into your collection um so that takes collections from like having you know you being able to configure stuff about like the who like who commit this nft or who can update metadata to who what where when right so because you're writing custom code um another thing about these modules is they're what we like to call composably autocratic which means that they can like Define their own behavior about if they can be swapped or if they can be removed and like a second order consequence of this is that creators and collections can define a path to gradually decentralize The Collection so like like an example of this is uh you know let's say when we first deploy this collection we have a really simple module for the metadata uh the metadata is frozen nobody can update the metadata and only the owner can swap this module out um and then the myth happens all the nfts are distributed maybe to each one of you everybody owns the nft and then the owner can swap this module out for a more decentralized module right so module 2 now says that if all the holders of the nft on the collection vote on updating the metadata to something of their choice they can and also maybe if they vote they can also vote to swap the module out so you've not just decentralized who can update the metadata but you've also decentralized who can Define the behavior of who can update the metadata so it's kind of like I'm at a decentralization and yeah maybe after this they vote to also Swap this module out for like um like an even more open module um yeah so here's like a really quick sample implementation of what a module looks like there's a solidity if you're familiar um I'll zoom in just because it might be a little small yeah so I can update metadata like this example implementation what it says is all the holders of the nft for like over 50 want to update the metadata to something they can uh also they got to do it for a certain time uh that time sub is also an Easter egg it's a Unix timestamp I first want to figure it out I don't know I'll give them like that amount away or something but uh there's also uh can swap can remove itself so this is like the composable autocracy part uh so in this example implementation this module is like fully locked in like this behavior is locked into the collection uh and then finally you can Define behavior about transfers right so like here we wanted to make our collection non-transferable so all the tokens are uh in this case consensually and untransferable sweet uh so coming back to the collection creation all right so final page before we deploy The Collection now we're going to uh Define like the mint details so you can sell each of these tokens at a fixed price or you can use a Dutch auction which is scheduled decreasing prices but we'll keep it simple we'll go with the fixed price uh maybe we'll make it free you can Define kind of all these like mid parameters when it starts when it ends maybe only let each person make two tokens um and then something really interesting we have here is we have this idea of like gated minting so you can create kind of these like really complex Gates that restrict who can actually mint on the collection uh so let's say let's let's create a gate um call it demo um and you can add like a bunch of these conditions so maybe the first condition we want to add is only like holders of board ape with a certain metadata attribute can mint on this collection uh so we can like go to this condition um come to the board a kind of open C collection page paste that in uh maybe I don't know board Apes with like a purple background can mint on this collection and then we can add another condition like holds a minimum amount uh so like you you have to own that board ape with a purple background and you have to hold a minimum of two ethers so it's very like elitist mint but we can change this to all so we you can switch between like an aura clause and and clause yeah and so we can just create this complex gate and now the gate is applied to the mint and so so the way that our mint works is uh creators can actually like gaslessly swap the skate in and out um so this is a good summary of our mint architecture so this is what it looks like on chain uh the MIT module is a smart contract The Collection is another that's the one that that's the smart contract we're going to deploy for you guys um we have this concept of mint vectors so mint factors are just like different ways to Mint on the collection so you can paralyze a bunch of different sales right so you could have a mid Factor that's like only board ape holders can mint at this for a free Price you could have another Min Factor that's going on at the same time that's like for a public mint uh so it's analogous to like mid phases on a normal collection um so at the top left you see like the user comes to highlight they want to Mint on the Gated mint we evaluate their blockchain account make sure they can actually like mint on the collection and then we construct uh a key we pass the key into the module we unwrap this on chain with eip712 and then we mint on the collection um and because these vectors are off chain the craters can actually come in and kind of edit them in config without a transaction so that's like a nice detail for them sweet okay so I think we've configured the mint we can just review everything that we've created and then deploy this collection battle mask is going to pop up sweet yeah so uh so once the band is actually deployed uh we're just going to quickly go through I think we're running off time but we'll just quickly go through the actual main page um so if you land on the main page it'll basically we're done full circle where we started from you have to actual art you you can mint it because it's okay like I don't think I have that much either so I'm just gonna go ahead and remove that gate which kind of serves as a purpose to show that so I go ahead uh this kind of happens in a gas plus way so I'm just going to go ahead save it and once that's done I'm just going to go back to the main page and I'll be able to Mint it um again same process once you minted you go through the transaction uh it captures the attributes and just to round it off uh the way it happens is we have a rendering engine and metadata logic uh again when the transaction happens we capture the transaction values whether the capture details it goes to a rendering engine which runs Chrome headless and it really relies on the attributes and capture preview it it outputs our image URL animation URL attributes and at this point what we do is basically we take these attributes we upload them to RV for decentralization and then we upload them to S3 the way we do dual upload is basically we want to keep updating the tokens but we want to also but anyone can verify that what values that are on chain this day on chain and nothing from the centralized server changes anything so we we do a dual upload so you can verify anytime the Mad data of the token uh but yeah so that's basically um again the the capture happen it should damage and it went through it but yeah at this point uh like that was just basically a demo but we'll talk about uh there's a composition that we're running and Asian will talk more about it sweet okay so we're almost done we'll take questions uh but real quick before we take questions uh so we're running a competition uh for for the hackathon you can there's five thousand dollars in prizes you can win up to three thousand it's really simple all you have to do is just well we'll give you access to our beta platform which you can find this form on the East Waterloo website uh but just make a generative art collection with the same like flow that we just ran through uh we're gonna judge you on creativity kind of any like cool thing that you input input in there and also we talked about the composability the protocol so if you want to introduce like your own modules if you know solidity or you can use our R modules you get creative with it uh you can win three thousand dollars and also the winner of this competition is the official uh East Waterloo uh nft so whoever wins we're gonna your collection uh we're gonna distribute your nft to all the attendees at the end of the sackathon um yeah and there's like if you go to this page like if you're new to generative art you can uh kind of learn how to do it you can get a collection set up in like five minutes it's pretty simple sweet thank you