Blockchain

Generative MetaMarble art with an NFT generator

This is the fun part. How many NFT images do you want to make?

We are using the HashLips Art Engine, but a fork of it by CodeSTACKr. The reason for that is the inclusion of commands to use NFTport's API to deploy NFTs and the contracts that support them.

Links:

HashLips Art Engine
https://github.com/HashLips/hashlips_art_engine

CodeSTACKr Minter Dapp
https://github.com/codeSTACKr/minter-dapp

The Setup

Clone the CodeSTACKr Minter Dapp repo to your machine.

From your terminal cd into the repo and then to the backend directory and the run the following npm command to install all the dependencies:

npm install

Copy your image layers created in the previous article into the /backend/layers folder.

Use the /backend/src/config.js file to set up your layers and NFT project information.

Here is how I setup my layers in the config.js. The way the scripting works is that it is commutative, meaning that the the first set of layers will make 32 NFT images, and since our smart contract's MAX_SUPPLY is 42, the second set of layers will only produce 10 NFT images [32+10=42]. I am using this to make my dark background based images to be more rare.

Each layer builds on the other so the script will go from BackgroundBaseLight to MarbleShine in order.

Example Layer Config:

const layerConfigurations = [
  {
    growEditionSizeTo: 32,
    layersOrder: [
      { name: "BackgroundBaseLight" },
      { name: "Background" },
      { name: "MarbleType" },
      { name: "MarbleBase" },
      { name: "MarbleRibbonBase" },
      { name: "MarbleRibbonInner" },
      { name: "MarbleShine" },
    ],
  },{
    growEditionSizeTo: 42,
    layersOrder: [
      { name: "BackgroundBaseDark" },
      { name: "Background" },
      { name: "MarbleType" },
      { name: "MarbleBase" },
      { name: "MarbleRibbonBase" },
      { name: "MarbleRibbonInner" },
      { name: "MarbleShine" },
    ],
  },
];

Rarity

Speaking of rarity, you will notice the hashtag and a number before the .png extension. The higher the number the more common the layer.  So, the color FF0202#70.png will show more often in the image generation than the color 0A0C08#20.png.

Once you setup your rarity hashtags on your layer images you can run the following to check your work:

npm run rarity

Example output for one of the traits:

Trait type: MarbleRibbonBase
{ trait: '0A0C08', chance: '20', occurrence: '5% out of 100%' }
{ trait: '2FFF00', chance: '60', occurrence: '17% out of 100%' }
{ trait: '41EAD4', chance: '60', occurrence: '10% out of 100%' }
{ trait: '842BD7', chance: '60', occurrence: '19% out of 100%' }
{ trait: 'FBFF12', chance: '70', occurrence: '19% out of 100%' }
{ trait: 'FF0202', chance: '70', occurrence: '14% out of 100%' }
{ trait: 'FF206E', chance: '50', occurrence: '5% out of 100%' }
{ trait: 'FF6700', chance: '60', occurrence: '10% out of 100%' }
{ trait: 'FFFFFF', chance: '20', occurrence: '2% out of 100%' }

Generate Images

At this point we can run a test to see how our final images will be generated.  Here is the point where you will notice any and all issues with your art.

Run the following to generate your NFT images:

npm run generate

This will take a bit and you will see something like the following scrolling by:

Created edition: 18, with DNA: d348bead33336a76aee7b741826884a92cce14ab
Created edition: 11, with DNA: 68cbf82198211bbf2824a60367838ac3855230ad
Created edition: 12, with DNA: 4939edf5ca6d147bf44f817f19f9708b78134ae3
Created edition: 41, with DNA: d30f05b8af55705a6da5b619d8965ac0ffef91bf
Created edition: 0, with DNA: 75a12b38642bd7256fd34e29648682b413c5faed

Once finished you can go into the backend/build/images directory to see your work.  Hopefully it all worked out.

The script also creates JSON files like the following. These files will be updated and uploaded later to IPFS so that NFT markets can read the NFT metadata.

{
  "name": "METAMARBLES #0",
  "description": "METAMARBLES is a collection of 42 unique NFTs.",
  "image": "https://ipfs.io/ipfs/bafybeiejyfegq2enhiep6yghvjnn5vabgm5ka7ghbbvf6sceaqzhajcfoa",
  "attributes": [
    {
      "trait_type": "BackgroundBaseLight",
      "value": "light"
    },
    {
      "trait_type": "Background",
      "value": "2F6690"
    },
    {
      "trait_type": "MarbleType",
      "value": "SUN"
    },
    {
      "trait_type": "MarbleBase",
      "value": "00FF15"
    },
    {
      "trait_type": "MarbleRibbonBase",
      "value": "842BD7"
    },
    {
      "trait_type": "MarbleRibbonInner",
      "value": "2FFF00"
    },
    {
      "trait_type": "MarbleShine",
      "value": "shine"
    }
  ],
  "dna": "75a12b38642bd7256fd34e29648682b413c5faed",
  "edition": 0,
  "external_url": "https://metamarbles.xyz",
  "date": 1654230441476,
  "compiler": ""
}

Wrapping Up

We've created our layers, cloned the repo, and generated our images and metadata. Next we will upload them to IPFS using NFTport.

Read next