Create 10000 generative NFTs : Artworks with code part 2

hey how's it going guys my name is daniel aka [Music] welcome back to the series where we are now going to implement the rarity structure now in this previous video of this series you guys have seen how we can create a lot of artworks simply by adding your layers to a file that contains numerous different layers such as these when you then implement these on the layers or when you've added your folders into the layers folder and you've organized your layers in order over there and you ran a simple command you saw that you could build numerous different images like so i think this is pretty cool and a lot of you were sad to know that i took out the rarities for this edition now the reason why i took out the rarities are because it wasn't done in a way that i loved when i talk about that i mean that it was okay it did do its job but at the end of the day we want the best of the best so i've gone ahead and implemented a way that i prefer to do things and that is the proper way i researched the best way of how to get rarity weights inside our program and yes i am calling this our program the reason for that is because we have all worked so hard on continuing this learning journey stick around and i'll show you how we're going to put back the rarities and the weights in a much better way and that's easier for you guys to maintain so let's get down to it in the previous version all you had to do was add your attributes basically your layers into the layers folder and then just make sure that the spelling is correct with the names according to the folder names and then in here you organized it from the layers going first in and last out that's all you had to do and once your attributes was in these folders you could have just basically gone down here after you've installed a node and ran the installations you could just run node space index.js after running that based on your configuration on how many elements you wanted to create it would then create a build folder with all your new images the problem with this approach was that the program wasn't configured to take and consider ration any weights any rarity types let's look at the updates that i've made for you guys so that it's just as easy to use but way more efficient way more faster and pretty damn cool so i hope you guys enjoy this let's go and check out the updates this is the updated repo now after this video after the explanation i'm going to show you how to exactly download it and use the program first i want to go through what's involved so that you guys the code fundees out there can get excited i'm really excited for this because the way it chooses its attributes are quite unique anyway it looks much the same as the previous one but now if we run node.js you'll see all these wonderful colors down here but apart from that it actually includes rarities so these images over here won't be one the same and also have rare attributes based on weights now in order for me to explain to you the weights it's a simple process the only basic thing that you will need to change is nothing in the program itself it has to do with the layers folder what do i mean by changing the layers folder well let's open up the eye color for instance all you have to do now is if you look at these file names you'll notice that these file names each have a star and then a number after the star this number is basically the weight that you want that attribute to carry weight meaning that how often would you like this attribute to show up in correspondence to all the other attributes for an example if i change the weight of the cyan eye color to one this would make it very rare the reason for this is because the weight in comparison to the rest are like very small right let's make the yellow one almost a hundred let's say this one is 50. let's say this weight over here is a small five and let's say this one pink one would be i don't know 60. and then lastly we'll leave that one at 10. we can automatically see that the yellow one is the most common attribute because it has a bigger weight it means it's going to be rendered most of the time the one with the smallest weight is the one that's the most rarest now you can make another weight that is one as well and that's what makes it so amazing this program previously you couldn't have these weights being equal you had to have it equal to 100 and now you don't you can make the weights whatever whatever you choose right and this gives us a way more flexibility than the previous programs if i'm you i would stick to a convention my convention is always to work out the work this out kind of accordance to a hundred so i would kind of say cool if it's a hundred hundred percent that this will be shown not a hundred percent remember these are weights it doesn't work with percentages it works with actual weights so let me explain it a bit better so in order for us to truly understand what happens behind the code we have to look at weighted random choices and this is a perfect article that i found when i found this article i just got excited now i don't know if that's weird getting excited over code but that's just how it is so let's get get on and let's read through this now i'm not going to read the whole article but i'm going to give you the gist of it basically i've already implemented what we need from this but i want you to understand something and i also want to give credit to this article for actually making this possible and showing me a way where this is done now think about it like this right we have got letters now imagine in our case that we have our layer elements our layer elements consist of a name id and a weight so imagine those objects each being inside this layer right in this array now we also need weights but like i explained our object already carries the weight inside itself let's quickly go back to the code so i can explain to you i will go through this code in depth but before i do i just want to quickly console.log something out so that you guys can see exactly what i'm talking about when i say our alphabet letters so to speak is the same as our weights when we run our program i can see that we actually got our objects now check it out we got these objects instead of just a letter if we reference this so imagine this a b and this b and the c being each an object in our array like so so there's technically a there's technically b and there's c all right so you can see that each one of these objects has an id a name a path and a weight and this weight over here technically is going to be our version of the separate weight array so i just want you to understand that i've taken this concept and merged it together because this didn't fit my use case so i decided to merge it together and basically use the same concept how this all works then is when it comes to the time for us to select a random element we go and check at the weights first how do we do that well we go and sum up each one of these so we say 9 plus 2 plus 2 plus 4 plus 12 and we carry on like this all right through the whole array in our weights so we add these weights up so 60 plus 5 plus 50. all right we carry on like that then what we do is because all of the weights for instance in this in this example will calculate to 102 it means that if you look at your first weight 9 it's basically saying that it's 9 um r09 proportions of 102. so here you can see they take the example of 12 okay which would be 12 of 102 meaning that it has a bigger weight than all the rest of the numbers i just want you guys to understand that concept what happens next is quite cool so we have a function that has the total weights we loop through all of these weights to get the total so we add each weight to the total that's what i meant by calculating every one of these weights together we get then a total which in this case would be 102 then we generate a random number based on the total weight remember we had a hundred in there if we go to our code where we actually do that calculation it's down here in this section i'll go through the code of on our side just now but i just want you to understand their code and then we'll come back to our code all right perfect so i just want to jump back quickly then once we have a random we give it a loop to loop through all the elements basically remember we don't have letters we have all the elements together in objects we then go ahead and take this random number that's been generated from the total and minus it by the current weight we keep on doing this and looping and looping and doing this until we reach a number that is less than zero if we reach that number it means that that element would be our selected element and in our case we supply the id for our dna in this function below here because it's in our create dna and we have to put it in our dna so that we can check that it's also unique so we actually return what is called the element id all right which is perfectly fine once we have that we can actually run this program and it will go and really select a weighted element based on that whole folder over here and that's why you can see why some of these are if it's lower numbers it carries lower weights than the pink and the red and the yellow because these are bigger weights so it has nothing to do with a percentage out of a hundred keep that in mind it all has to do with weights and this allows us for adding as many elements as we want to as little elements as we want to hell we can only even have one element and we don't have to make the weight a hundred we can make the weight one because there's only one attribute right so it is always going to be called so that's what i want you to understand when adding your weights it doesn't have to be out of 100 but you can make it a hundred to make it easier for yourself or you can play around i'm going to dive a little bit deeper into this quickly through our code base so that you can understand but if you want to read this article i highly recommend it it's a pretty cool article and you'll get great insight on what we are doing in this next version let's go through our code step by step so you can see the process taking place okay so now let's look exactly what happens to the code so you understand it fully i urge you guys to watch this till the very end so you know exactly how this is implemented and also see at the very end how we're going to clone the repo and run your own files with the rarity weights let's go into the terminal and you can press command k on a mac as a shortcut to clean your terminal next let's look at the entry point of your app when we look at the index.js we can see that this is the two functions that gets called we know that we have this build setup and the start creating in the bolt setup if we go to it you can see that it pulls down from main.js which is in here so the first step that takes place is a built setup what this does is if we can just find it there it is what this does is basically it checks if this directory if this build directory exists it checks for it and then if it does it cleans it out otherwise it goes and creates it anyway right that is something you need to understand after that happens that's why it doesn't matter if i even delete this build folder and i run the program it doesn't matter if it's there not it will be created the next step that takes place is it starts creating so if we jump to the main.js file and we go into this file you can see it's all the same code that we've been discussing as we were coding previously but the changes that i've made that i want you to pay attention to is actually this the fact that now when we check and create new dna this is actually the only place where it really changes if we jump to this for uh to this function we can see that inside this layers it comes in here and we pass the layers object which is in turn these folders basically it goes ahead and loops over each one then it has an empty array here at the top before it loops it loops through each one then it goes and creates a total weight now if you can recall this is where the total weight and the code kind of that comes from this article is implemented in i just adapted it to fit our needs but basically it is the total weight it loops through all the elements in the array and adds all those weights together that's why in the log you'll see that i've logged out the total weight so i'm going to explain this now but just understand it it calculates the total weight over there all right and then in the logs you'll see that the total weight of this one folder is a hundred like i said you can choose whatever amount of numbers you want to work with it will work with any amount i just keep 200 because it makes it easier for me to understand what weight it will carry then what happens is it goes and creates a random number out of that total weight for instance if the total weight is a hundred it will put a hundred in there meaning that it will create a number between zero actually and that total number right minus one but anyway it will create this random number and then what will happen is i print out that number so down here in the console you can see this was the total weight this is the random number that was created after that we enter into a special loop where we subtract our element's weight our current element's weight from the random number and we do this recursively until we find a random number that's equalling less than zero all right so here you can see for each layer it does the same it gets the total weight finds a random number it it calculates the random number again then it subtracts that again we left to three then it subtracts that again and then we are left with minus 74 which means this is the id that will get picked this is just a special way for you guys to control weights that a random number should pick it's a very interesting way but indeed very special now like you see if i run this you will see all these logs being logged out i am not going to keep these logs in the code seeing that it's cluttering the the code base so what i am going to do is i'm going to go ahead and remove this but if you've seen this video you'll know exactly what i talk about and you can put these back if you really want to i'll leave these two descriptions just so you know exactly what's happening but when we run the code it should purely just do this to see what we have been creating lastly i want to show you something if you open the builds folder and you open let's say 1.json i'm using prettifier so it automatically formats nicely like this one thing that i want to mention is if you want to add to these attributes field you can easily do so in the main.js and scroll up to the add metadata and then you can add a bunch of attributes like compiler attributes the date edition image everything you see here is exactly created in this function these are for the people who really want to modify their metadata for solana or something like that but guys i really hope you enjoyed this i want to show you now how to grab the code from github and then actually implement it in your own um on your own with your own layers so how do you use the rarity weights and this is what you guys have been waiting for but now that you understand everything you'll feel comfortable in implementing this yourself go ahead and go to getup.com forward slash hashtabs forward slash hashtabs art engine once you're on here you can see we now have two tags you can either click on these two tabs and see that there's two releases the latest release that portrays to this video is version 1.0.1 if we go to the release and we go and check if we go back to the repo and you can also click on the releases here on the right hand side and you click and you select version 1.0.1 you can see if you go into the releases you can see there is the previous one if you scroll down this is the previous video without the the new rarities and if you select this one this has the rarities so all you have to do is make sure that you download this source code.zip once you have done that what you're going to do is you're going to drag this onto the desktop or wherever you want to put it i'm now just dragging it onto my desktop into an empty folder like so i'm then going to go ahead and extract it so that i have access to it over here next what you want to do is open your favorite code editor mine is visual studio code make sure that you have node js installed or yawn and you can see the previous video to make sure you have those dependencies installed but anyway what you can do now is just go ahead say file open go to your desktop i've saved it under this folder i just want to open the right folder so you have to open your your file structure it should look like this once you have these you can go ahead and simply go to the terminal so you open a new terminal for your vs code and you run npm install like so or you can run yarn at all i prefer yarn like i always mention that after all the dependencies are installed give it a test run in the terminal run node index dot js a lot of people are having issues with that so to make sure you have node installed first run node dash v to see what your version of node minus version 14.17 if it doesn't give you a version you haven't installed node yet if you have you can just run node index.js once you've done that the program would start it takes a little bit of a while the first time but once it gets running it's very fast you can also verify that you have the latest repo by verifying that you see the weights added to all these images and there we go we've just managed to build our first collection which looks like this now let's go ahead and put in our own files empty the layers folder like so and go and grab your own artworks i already have my artworks over here that i want to in place in here make sure that you do place it underneath the layers folder like shown in the example now next what we need to do is we need to make sure to rename our config.js which is sitting in the source folder make sure that you have the corresponding folders over here that you have inside the layers if you don't this will not work let me show you if you go down here and you run node index.js you will run into an error and your error might say no such file in directory it means that you don't have the corresponding layers let's go in ahead and add them quickly i've done this before so i'm not going to do this i'm going gonna quickly do this fast so we need clothing and then we also need clothing logo and then we also need the eye brows i'm not going to do everything because i don't want to take too much of your time but i'm going to put the mouth in there and it's also put in the eyes maybe and what else maybe the headway just like so i'm not going to choose all the folders in here i'm just choosing a little bit of them but you will usually put in all your files in there now let's delete the ones that we don't need because it just makes it easier so i'm going to delete the eyewear i don't have that and then again i don't have a nose let's see how that turns out i'm just going to remove that one as well i don't this is an experiment anyway let's see there's about seven folders so one two three four five six seven there we go if you run the program now even though you have the correct um folder names it will still break because you don't have any weights all right so it's going to try and build but it's going to fail because it can't find a path to them so what you want to do is you want to open your folder structure and to each one you put a weight how you do that is by putting a star and then you wait now because there's one file in this folder i can make it a hundred i can make it sixty um i can also make it one it won't matter because that's the only one in there so i'm going to make it one then in the clothing section i'm going to go ahead and add maybe let's say 20 the hoodie is going to be asterix 30 this shirt i will put a let me make it a hundred i want that to show up quite a lot the vampire cloak's quite rare so i'm gonna make that two then the v-neck that can be common maybe 50 and so on you go and add all your rarities just like this and you will see that the program finds it very easy to now do the rarity traits for you automatically i'm going to go ahead and add all of these traits and then come back to you i am now done with all the rarity weights in the attributes that i've added and you can see that i haven't even done solid numbers for instance i didn't keep this all to a hundred everything equaling to a hundred and so on i literally chose whichever rarity weight i wanted to i did this on purpose so that you guys can see that you can add any rarity weight of course this will make more sense for instance if we take a folder like this and we say that the alien clothing logo might show up 15 of the time the coder might show up 25 of the time then we can go into solid numbers such as this one maybe 50 and then lastly if we calculate this so this is already 30 40 40 plus 50 and put a 10 over there just to round it off if you work in a solid round number like this where i know that each folder is going to exist of a hundred roughly then i know closely to what percentage it might be out of a hundred right but you don't have to stick with that and that's the amazing ability of this program needless to say if you have done that to all your layers make sure your config has the correct folders and that the layers here are also correct once you're done with that you can go into your terminal and run node space index.js once you do that you can see your collection should just start creating and there we go there's the collection i hope you guys enjoyed this so very much i was super excited to do this remember to go and leave this repo over there a star and also a like i don't know how you like it but maybe fork it or something but you can go ahead and do that i will see you guys in the next video please leave your comments in the description what you will see uh what you want to see actually next happening to this program my next goal is to make this even more simple for you guys to use and maybe some level of control on certain attributes have an amazing day guys

Channel: HashLips NFT

Views: 4,683

Rating: 5 out of 5

Keywords:

Id: 2oBrbbTZ9jw

Length: 28min 31sec (1711 seconds)

Published: Tue Sep 14 2021