Mermaid Tales: a Mermaid's guide to no-code generative tokens

I’m part of the Crypto Mermaids’ founding team, and as part of our mission to demystify male-dominated topics of knowledge, I’d like to take you along on my journey to creating the mermaids generative token for fxhash with no coding experience.

At risk of seeming like an unnecessarily detailed recipe blog, I will take you through all my trials, errors, and reflections. If you just want the step by step instructions, you can follow the instructions on PureSpider’s GitHub* that are detailed and easy to follow, as well as fxhash’s own tutorial on how to use the PureSpider template. If I already lost you at “GitHub”, keep reading.

Starting with the basics, a Generative Token allows you to create randomized images from a set of predetermined features. The Crypto Mermaids for example are based on the concept of paper dolls. We have decided to have only one body with 11 different tail options, 13 tops, 8 types of hair, 5 possible accessories and 5 additional rare attributes (starfish or seahorse). Whereas with a paper doll, you might spend time selecting each item, a generative token will select a random combination for you. The way that works is a game of code and probabilities.

When I initially started writing this blog post I had been tasked with creating a generative token but I didn’t know where to begin. Like anybody would do in my situation, I typed in “how to make a generative token for fxhash” on Google, which brought me to the “how to publish a generative art token” page on fxhash. The first sentence of that article reads that generative tokens can only be written in html/css/javascript. I braced myself for the long hours of Youtube tutorials ahead and let my team know that I was on it, though it might take more time than initially anticipated. I didn’t have to fall too far down the javascript rabbit hole before I was told about PureSpider’s template.

PureSpider is a generous developer that posted a code template on GitHub for anybody to create generative art works on fxhash. When using the template, all you need to do is prepare your files and your computer to execute the code. After that, all you need to do is insert your features in a folder and upload the whole thing to fxhash. Though this ends up being incredibly simple, it can appear a bit daunting if you’ve never dealt with anything like it before. Like… where do you even write code?

Heads up: all of the following was done on a Mac, there might be some slight differences for PC users.

What you will need:

Well-organized attribute folders

This is where you create your project, you can read more about how we created the Crypto Mermaids on our website. Keep in mind that the different features will be layered on top of one another, so make sure that all files are the same size, and that your backgrounds are transparent where needed.

Each layer needs to be in a separate folder. Think about what order you want them to be in. The folders need to be numbered from 00 for the background to 0X depending on your number of variables. For the Mermaids, 00 is the body, 01 the top, 02 the tail and so on, until 06 the seahorse (see image). You should label each folder XX-Name_of_feature. I’m not just making this up for the sake of having neatly ordered folders. Unlike humans, computers don’t actually understand text, they simply recognize patterns and execute functions. PureSpider’s template has told the computer to look for folders that are named like this, and stack them up according to the numbers you’ve written down.

The text (ie. Body, Top, Tail…) is what will appear on fxhash under “features''. If you don’t want the text to appear, simply insert -(hide)- in the folder’s title between the number and the name, as you can see that we’ve done for the “body” feature in the image below. Note that the computer doesn’t register spaces, so if your feature name is made of more than one word you must separate_them_with_an_underscore.

Within each folder you should place your individual attributes. This time the format is XX-attribute_name where XX is the probability of that attribute coming up. This is how you can decide to have some attributes be more rare than others. For example, with the Crypto Mermaids, we’ve decided to make the “Crypto by the Pool” book our rarest accessory (see image). The numbers are relative to one another, they don’t need to add up to 100. Your generative token will choose one attribute from each folder to create a whole. You might not want all your features to come up in each final output. For instance, our Crypto Mermaids all have hair, tops, and tails, but they don’t all have a starfish or seahorse. In order to achieve this, simply add a transparent layer labeled as “none” (see image) in the corresponding feature folder.

Node.js

The first instruction in the PureSpider template is to download Node.js. This is simply so that your computer can execute all of the javascript commands. You won’t need to open it at any point.

Then what?

Download the .zip file from GitHub. It will be labeled as fxhash-pfp-master. The only thing you need to do is put your layers in the “layers” folder in project > public.

Now you’re all set to generate your token. On Mac, you can open up your terminal (finder > applications > utilities > terminal) and execute your code. The general command to execute a file in terminal is ./filename. In this case, that would be ./generate.sh.

I ran into a couple of issues with this single line of code.

Firstly the template tells you that you need to make your file executable on Mac. Before executing your file, you have to type in chmod +x generate.sh

However, even after typing in this command, I received an error message telling me there was no generate.sh file. This was because I was in the wrong directory. The directory is the area the computer can operate in. For instance, if you set your directory to your downloads, but the file is on your Desktop, your computer won’t be able to find it. The command to change your directory is cd (“change directory”) followed by the path the computer must take to find the file. In my case it was cd ~/Desktop/fxhash-pfp-master. (~/ Is a shortcut for your home directory.)

See the image below for what this looks like in your terminal (including a brain fart where I thought the file was called execute.sh).

That’s it! Now you’ll see that two new files have been created. Inside the dist-zipped folder you’ll find the project.zip file. Head to the fxhash sandbox to test your project. If it’s behaving correctly, then you’re ready to mint it on the platform.

We circle back to the beginning, as the “how to publish a generative art token” tutorial from fxhash now comes in handy to learn more about the minting process and help you publish your project on the platform. My tip is to join the fxhash discord in case you have any questions. I asked a question on the “noob” channel and received two answers in under five minutes that helped me solve my problem.

Happy minting!

XX

The Crypto Mermaids

***

*GitHub is an open-source platform for developers to share code and collaborate on projects.

Crypto Mermaids are 250 unique PFP NFTs that support Crypto Education for those who feel isolated from Web3.

Crypto Mermaids are dropping on fxhash May 31st 2023 at 14:00 EST. Join us on twitter to celebrate the drop!