Creative Summit | Fully on-chain generative art - Harm van den Dorpel

[Applause] [Music] uh i am very excited about the night i and i've been excited about every single one of these conversations but i'm particularly excited about this one just because um not only because we have a fellow berliner he is not too far from where i am right now in france i'm in bedding in case you know the geography of berlin but he is really an artist that deserves to be called a legend just because um many of the things we do day in day out wouldn't be the way they are without his work and the work that he had put in the experiments that he dared to do when nobody thought about them and we all should be internally grateful for that but also some of his methods are arcane and mysterious and i'm very happy that harm band and dorple tell us all about how he does the beautiful things he does so please everyone a warm applause uh for harm vandan uh please enjoy friends thank you for the for the introduction can you can you hear me i will be yes very well excellent i'll be doing quite a bit of screen sharing um i'm usually when i'm invited to to be in panels or give talks i'm usually asked to talk about the the art the the aesthetics the the art historical references and this time i was i was asked to actually more like have a technical talk which is exciting i rarely get to do that so i will be actually be talking about uh smart contract programming and i've been doing that for a while i think i started playing with solidity in 2018 17. and why i think this is interesting to talk about in a art context is because the what makes nft's nfts for me is that the fact that they are immutable so they are to some extent unchangeable fixed and that means they are resilient they can be taken they cannot be taken down by a government but also it addresses the difficulty that i experienced earlier before blockchain with digital art because the software our digital art is so easy to change it's so easy to to get to disappear it's so easy to um you know to lose it somehow and the ephemeral nature of of digital art which i've always loved was is really nicely complemented by blockchain technology where you can actually fix certain things of your digital artwork of course with the benefit that it is resilient it is it cannot be censored but also it makes it really um well easier to commodify so you have this enormous now this market of nfts of which for which artists are greatly profit um this talk is called off chain and of unchain one chain nfts and uh some people might ask like aren't all nfts on chain so i'm going to show a few examples of how different nft projects are on chain or to what extent they are not on chain and most uh most of the times um the parts that are not on chain make the artwork more flexible but also less resilient and temper yeah more more prone to to changing i'm going to share my screen and i'm going to show some examples so can you see my screen now so this is actually the project i'm going to touch the latest that is my own for you mo i think many of you will be familiar with the ethereum nft standard erc 721 where the basically the only thing that is stored on chain by that specification is who owns which tokens so you so you have provenance the asset that it references the artwork or the collectible is most of the time not actually stored on chain because that would be way too expensive and the way a smart contract exposes what it points to or what it represents is by a method called the token ui i'm showing this quite famous uh artblocks project by uh dimitri cheniak so anytime you are on an open c you can actually just go to the contract address so this is the token id i'm going to visit the contract on etherscan go to the contract um read the contract everybody can do this this is just open and this is this is free for all and i'm looking for the token uri and this is important i i hope you can you can read this and make it a bit bit larger this is the the address that the that the token is pointing to let me make a new text file so this is just a web page basically it's just a json file and if i open it in my browser zero bunch of properties uh the metadata of this token and this is the one i want to highlight the media one and in this case also the media property also points just to a url so in that sense you could say that this nft is partially unchained the nft is unchained but the assets that it references the metadata and the image are not so art blocks imagine invented another mechanism to still have the code that generates this artwork to still have it on chain and it should be somewhere here project script by index so i took the number 13 from the token id and i think this project only has one script so this is a lot of gibberish that you i don't expect anybody to understand this but the interesting thing is that here that if this is actually the script that generates the image i just showed oh it's gone and with this code anybody could always reconstruct that token in theory so one of the things if i for example search for the word stroke which is a method that's being called a few times this this method stroke is actually not defined in this code the the method stroke is part of p5 and that's a library that is stored on another server so this this makes it flexible because you couldn't store that whole library on chain that would be too expensive but then also by not storing that you make it fragile so there's constant trade-offs in what can you use to run chain how expensive is that because storing on chain is very expensive in terms of gas and how flexible are you let's see where where i was all right i do something similar with that in my own mutant garden sealer a project that i made about a year ago again i can go to the contact address look at the contract read contract um actually i have to [Music] remember what i have to view with the token id down here and again you see i get this web address and if i open that i get a json file and in this case the image points to a factory graphic which is stored on my server how i solve the problem of resilience because if my web server is down where does the nfd go is that people can run a desktop application that does the calculates the the mutations for you so this is sort of a side chain that runs parallel to mainnet and it it calculates the mutations which is important in my project because in this project the nfd's actually change all the time based on the current um on the current hash on the current block hash let me see let me open one so all the holders of this project can can download this software and and calculate the mutations on their own without depending on my web server depend without depending on anything really so that aids in the desire for decentralization i'm going to close this because it costs quite some resources a product that many of you will know that is actually having another approach is loot and again i'm going to just open one of them we don't have so much time so i can't really get into the projects themselves individually so contact so this is token442 i'm going to expect it again now this is interesting i ask for a a uri to a metadata resource file like a json file but instead i get this gibberish so it starts with data colon application slash json semicolon base64 comma and then i get a whole bunch of gibberish now this is a data uri so it's not a uri like you're used to like a url here with like a domain name but this is also in most browsers something is being accepted as a as a valid uri so i can copy this whole string and just paste it here you should never do that this if you get this link from like some hacker or something because this is also can be risky but if i open it you can see that again it just shows me some json file and json is this format to express the properties that an nft has so it has a name maybe i can make a larger it has a name description do here and then it has an image and again you have you see this this string starts here data colon image it ends here there's a whole bunch of gibberish if i copy that string and i have to do it really precise so include the data part and end before the quote you see now i have an svg so we can also inspect this see actually this is an svg a very simple one because if it would be a very complicated svg it would be again too complicated to put that on chain so what happens here this this data uri it specifies here that it's data but from there and it knows what to do it's not http it's not https it's not ipfs the the type of the data that it expects is in this i think it's a mime type actually so it expects oh sorry it expects svg and that's xml and the code this gibberish is encoded as base64 and that is a way to express complicated data like images or sound mp3 or in this case svg to express it in characters that will not let like up data transmission because in this gibberish string you cannot for example have a quote because that would ruin it or other like non-ascii characters and that's basically the trick so these two steps is first to encode the entire json file in base64 as a data uri and then again in the image attribute you encode it again so actually in the end the end result is that this svga image has been encoded twice so you also have to decode decode it twice um i will go here so this there's actually one one more way uh which is more similar to the first project that i showed on art blocks on my own because in those two projects the art blocks and the mutant gardens either the assets referenced were on a web server on my web server or in the case of art blocks on the artbox web server there's also one way to store the both the metadata and the the image to store that differently on ipfs so i would say that that's ipfs is not a blockchain but it's a distributed file yeah hosting solution you could say so it's it's already more resilient if you would take one ipfs node away the file would still be there and this particular artwork that i made you can also on zorya can you can always inspect the contract and you can expect inspect the the metadata and it shows okay the metadata for this one is stored on ipfs and the artwork is also an ipfs so if i click on here i'll get this here and i'm inspecting this json through a gateway because my browser doesn't by itself understand what ipves is if i would do this ipfs because this is actually how it's stored in the smart contract my browser doesn't know what it is i also have brave i believe bray does understand there are some browsers who can do it but until that you have to use a gateway and this gateway is provided by pinata and you can see that the image also references again an ipfs hash which is this one so if i'm going to refresh it you can see it takes that takes quite a long time because the beauty of ipvs is that it's shared and distributed and safe but it's also much slower than on a web server so there's all these trade-offs i wanted to show that project as well but we don't have so much time we only have like 10 more minutes um yeah i'm going to show some of the code really quickly of orb live this is also just available you can see it on etherscan so this token uri method i've been calling a few times that you have to pass a token id this is how i did it and i can really recommend also if you like this kind of stuff to look at the work of um alberto granzotto i've actually incorporated and learned a lot from him i didn't invent any of this it's i've used a lot and i can also share these links afterwards uh in the chat or something so you can see what the the what is going on behind the scenes when somebody calls token id like openc calls it or zora to show what the artwork is in this case these animated squirkles this this like crooked circles it um it returns a string that is based on and here i'm just doing really crude string concatenation of chunks i'm just generating json here as string manipulation and this is ugly code because solidity is really not meant to do this and you encounter all these limitations and you have to hack everything around which is also fun it feels a bit like early demo scene where people only had 64 kilobytes to make an animation and then the beauty of the animation was sometimes not so much in the animation but in the in the innovation to to get so much stuff into so little memory and i think that's a bit the case with these on-chain solidity svg tokens as well so here is the um the encoding let's see where encode image the image is here and it's the svg method actually does the rendering it does the base64 encoding and the render function is here so one one funny ugly thing let's see because in in solidity where the program is among us um you can only have like 16 local variables so if you need more you have to split up your your method into arbitrary sized uh subroutines otherwise it just doesn't work so you constantly are confronted with the limitations but that's also kind of the fun and the amazing thing is i think is that these kind of nfts are not depending on anything not a web server not ipfs so as long as ethereum exists and as long as we have browsers that can display them this artwork will remain in its animated form which looks like this let's just pick one and the way they uh that they are being decided uh on the on the on the way they look the the colors they have the rotation speed the transparency is all calculated in the smart contract based on uh the moment of minting the seed hash i think it's called let's see if i can show where that is so there's there's many uses of this like random random number generators but actually they are not really random they are deterministic so i can be sure that based on the the seed or the the birth transaction that they will always show the same thing and i decided to give all the orbs a temperament or a bias i could let here and there's all there's only four horny deep innocent and vivid and these are just returned as strings for example here trade type temperament value get bias string and these can also be seen here here as properties i can for as example um decode one of them so again i go to the contract of this one let's say 338 is the token id i inspect the smart contract then contract read contract so these are the methods i could say render 338 you can see this is just the svg code as we understand it in in just regular code but to communicate that we we need it to be base64 encoded so this is just actually it's a public method but it's actually never called because the token uri method calls that so i say give me the encoded metadata of this of this token which is actually quite long you see so in here encoded is the svg code to make those colors and those animation i'm going to copy it paste this here so again well we have still a lot of gibberish but this has become visible now so name description image and at the end the attributes like the colors the the temperament the amount of rings and i'm going to copy this again until here and there we have the svg and the svg is actually um well relatively complicated if in the sense of if it can still be encoded while developing these kind of things i really recommend before you start getting into the solidity code first finish your idea as just as an svg just by hand maybe using a text editor then when you figured out exactly what you wanted to do try to program it in javascript because javascript is much more forgiving and when you've done that entirely then port it to solidity uh because in solidity you will encounter many well uninspiring um problems because it's a very very very tight unforgiving language the tools that i've been using to do that one is called odd chain svg and i can really recommend it so for those of you who have ever developed in for example uh react with webpack and all that um one one amazing thing you can do is like when you are coding the website that you're building refreshes on the fly so you don't have to refresh or recompile it all the time and especially for smart contract programming compiling it and then refreshing it would take a long time so i've been using hotchain svg so you can type your solidity code and then each time with each change it reloads and this is also interesting because sometimes you're coding for a while and then suddenly it just stops because solidity has all these limitations in the amount of variables you can have or the amount of rendering that you can do and at all because there's still a gas limit and with this software you you at the most well reported moment you just realize oh it just stopped working entirely because if your smart contract the rendering of svg goes over a certain threshold then it just stops you don't get an error message just don't know what happened at all i will put a link to this also um in the notes that was really short and i think i think i kind of touched everything that i wanted to wanted to show there's one project that i didn't show i i think i should do that because for for for history the first project that like i think it's i think nobody really argues that it's this i think everybody agrees that this is the first unchanging narrative art piece on the ethereum blockchain and so let's inspect how this one stores its data which is actually quite surprising because like we just said oh i have to remember the token id like i just said the nfts always have metadata as a json file which points to the asset somehow it's forgiven that this one doesn't do that so instead of outputting metadata it just outputs the plane uh immediately the artwork which is just text and if i copy this it is a data uri but if i just copy this you can see that this is the artwork but it doesn't supply other attributes there's no metadata file there's no json there's no title uh there's no description it just plainly outputs this i don't know if uh openc would accept this for all projects but this is kind of a seminal artwork so maybe openc programmed some kind of exception i don't know but it's always a pleasure to end with uh with autoglyphs i think i will give it back to you thank you harm um this was you know for me for someone who does not really write any code it was incredibly insightful because even i as an amateur or charlatan depending on how you define it i understood so much about how to actually generate such such fairly complex and and um works one question you know like is what's like this skill set that you brought to this like what is your your background maybe also because wherever quite a few artists watching and and many of them might not you know have a background in coding so was there something that you did before you know are you a developer by trade and then became an artist i i started programming when i was 11 and you nerd and i studied software engineering so guilty yeah but i i also went to art school but but i must i must say that like i'm not a hardcore solidity developer because i've made some some smart contracts and i thought i'm done this works and then i had some of my like real salinity developers like oh if you do it like this you can get hacked or front round or like so i'm still learning and uh i'm approaching it very much from the playful side but not the um i i wouldn't program like a dao or something like that i would not have the skill set to do that maybe one last question somebody who's been you know spending so much time with unchained art what do you think is in this regard the next step the future um what is it something i mean we also have quite a few uh experienced developers that also probably in some groups within the ethereum community say anything that you wish for the future of on chain art oh that's a really good question i by the way i don't need to have to understand the answer you know you can really speak to that audience now one one thing what i would wish in the community is that people are have easy resources or easy go to website where they can inspect how and if how a particular nfc is built and understand how resilient it is and if it can be rugged and also see if it's innovative in a technical sense because i think many people just put all nfts on one pile and some of them i think like it's not strange i think i think to say that in like five years half of the nfts we have now will not exist anymore because nobody is paying for the hosting fees or for the ipf exceeding the ipfs hashes and a lot of money is paid for these things so education would be good there i i don't know if much will change after the merge of ethereum if that will change uh transaction costs because if it does if it makes it cheaper then this kind of stuff might be cheaper to develop but i'm mostly worried about the province or the conservationist aspect of the artwork themselves this was a really uh interesting answer and also you just gave a little inspiration for maybe the next hackathon project because such if these tools are missing then we should find teams to to build them for everyone's benefit because obviously these are tools that should be open source and accessible to also we can advance the space together um harm thank you so much for taking the time and to lift the veil um so we were able to learn from you and everyone please um harm is actually one of the nft artists that you can see exhibiting quite a lot around the world so and his artworks are really striking in their fidelity once you have them really really big before your eyes so please make sure to to visit him harm thank you so much and have a wonderful day my friend you too my pleasure bye