NFTs 101 -> How to create generative art

There are tons of tutorials out there on youtube. Even ethereum.org official website has one tutorial which teaches you step by step. I’ve watched HashLips’ youtube video and managed to get my “art” completed.

Here are the steps to follow in case you don’t wanna sit through the 2 hour+ express video. There are 2 main part to get this done.

Part 1: You need to prepare your “generative art” in certain format.
Part 2: Download and setup HashLips Art Engine to generate your artwork for you.

Preparation of artwork

First we need to understand the concept of how this generative art works. Imagine you are a 4 year old girl playing cut out dolls. You get to change the clothes/shoes/hair for the doll. 1 set of cut out doll but you can create multiple versions of how it look.

Next we prepare the drawings layer by layer in your photo editor like PhotoShop, Seashore, GIMP, CorelDraw, etc. I use GIMP. Make sure every layer of your pic is the same size as the final picture. Save each and every layer as an individual .png file.

Download and install HashLips Art Engine

Great! The tedious and hard part of drawing is now completed. Here is the easier part for me at least since i’m a geek more than an artist. Here is what is required.

1. Download the HashLips Art Engine Github repo from here.
2. Download NodeJS from here.
3. Download VS Code from here.
4. Unzip HashLips Art Engine, install NodeJS and VS Code.
5. Open up VS Code and open the HashLips folder which you unzip.
6. Click on Terminal inside VS Code.
7. Type the following to install –> npm install

Great! Now the tools are ready. Let’s tell the art engine to play around our pictures and generate some cool artwork.

Setup artwork and HashLips Art Engine

1. Create a folder “layers” inside HashLips Art Engine folder.
2. Create folders of your different layers categories. Example, Headwear, Hairstyle, Earrings, etc.
3. Move all your .png files into the respective categories folder.
4. Name your files and append some rarity codes. The smaller the number, the rarer it is. Example, earstud#20.png, earring#50.png. This would mean out of 70 pictures, 20 will be with ear stud and 50 will be with earring.

Setup config.js

For more information, you can refer HashLips github page for detailed instruction.

1. Click on config.js inside VS Code under “src” folder.
2. Fill up the information on line 8 and 9 if you are deploying on ETH or MATIC network.
3. Move down to layer configurations section on line 27. GrowEditionSize is the amount of images you want to generate. Change it accordingly.
4. These orders need to start from the lowest layer all the way to the highest layer. Name it same as the category folders you named in the layers folder in previous part step 2.
5. You can add in extra metadata in line 87 such as your website or other data. Save the config.js file.
6. Lastly, go to terminal and type the following to run the engine –> npm run build

MAGIC!!!

After you see the terminal stop generating lines, open up the build folder inside and you will see an images folder and a metadata folder. Open up the images folder and you can see all your “dolls” inside! I played this thing for a few hours. So impressive! Have fun!