Minting cables.gl artworks on fxhash
The generative art scene on Tezos is vibrant, and one of the main platform responsible for that is fxhash. Created by ciphrd, it allows generative artists to create artworks where each mint is dependent on the transaction hash — making each mint a unique piece of art.
This article won’t go into how to collect NFTs on Tezos nor how to create a generative artwork on cables.gl. It’s rather aimed at artists already using this platform and wondering how to combine this with fxhash.
Workflow
Inside cables.gl
First off we create the cables patch and set up all variables that we will be using later off. We’ll be focusing on setting up number variables, but that can be applied to any other type (string, array, objects…)
Fxhash uses its own random number generation method, generating a number between 0 and 1 — based on the transaction hash. So usually, the first step is to set a rand variable (can be named anything else) which will be linked later to the fxhash() function.
In order to simulate the fxhash() function inside the patch, we’ll be using a Mouse node triggering a TriggerRandomNumber (min: 0, max: 1, float mode) node. The latter is connected to the var set #rand node and allows to have a number between 0 and 1 on each left click when clicked on the artwork canvas.
This rand variable can then be used to set various parameters randomly. And it’s ready to be used once we convert the patch to a fxhash ready artwork. Each additional parameter can have its own TriggerRandomNumber with its own range (check example below).
To get the variable, use VarGetNumber node and assign it to the variable you want to get.
Make it ready for fxhash
Once your artwork is ready, disconnect all TriggerRandomNumber nodes from the var setnodes. Export the patch as a zip file. Download and unzip it.
Then we need to prepare the files that we are going to upload to fxhash.
Download the boilerplate from here: fxhash-cables-boilerplate and unzip it where you can find it again. Copy the js folder from the cables.gl project inside the boilerplate folder. Your folder should look like this:
Open index.html and let’s connect the patch to the fxhash() random number generator.
Getting and setting a variable is usually pretty straightforward once done a couple of times, but can be daunting in the beginning. Here’s the link to the official documentation: Using variables.
If you scroll down a bit inside the index.html file, you will see this code block:
rand is a variable set a bit higher in the same file. This variable is assigned the value of fxrand() and used in the patch by setting it via CABLES.patch.setVariable('rand',rand). It will be transmitted to the rand variable in the cables patch. And this can be done for any additional variables being used.
Additionally, in the index.html file, there are two additional functions:
map(current, in_min, in_max, out_min, out_max)clamp(input, min, max)
You can use two functions to map the range of fxrand() to the desired values and send them to the patch.
Once you have set all your variables, save your file. Select all files in the folder and compress them. This will be the file you send first to the sandbox to test, and then further down the road to mint.
I hope this will help all of you generative artists wanting to start minting on fxhash. If you have any comments, feel free to comment here, or contact me on twitter: https://www.twitter.com/somaticbits
