Jang.js is a Javascript tool used to create custom artwork for NFT collections. There were lots of simple NFT generators that created collections based on the images in a directory but I wanted the ability to add custom logic when building up artwork layers.

Blog post covering this tool here: https://jamesbachini.com/how-to-generate-artwork-for-nfts/

You'll need Node.js installed from https://nodejs.org

Then open up a terminal/console and clone the directory and install dependencies.

git clone https://github.com/jamesbachini/JANG-Just-Another-NFT-Generator.git
cd JANG-Just-Another-NFT-Generator/
npm install

From there you can open up jang.js in a text editor and change the project name, description, URL etc.

Once you have the basic settings done it's time to start creating layers. Start with a background or collection of backgrounds and then build on top of that. All the code after /* Add layers using various methods here */ can be modified to suit your individual project.

The layer is added using the following command. The first parameter should be the directory the layers are stored in i.e layers/Backgrounds, the second parameter should be the filename without the .png, this is also written to the metadata file for the NFT so name it something descriptive, the final parameter is constant and we just pass a pointer to the canvas object as ctx.

await addLayer('Backgrounds', 'Background1', ctx);

Random from array

const arr = ['Background1','Background2','Background3','Background4'];
const bkg = arr[Math.floor(Math.random()*arr.length)];
await addLayer('Backgrounds', bkg, ctx);

Generating playing cards from nftID (can be used in the smart contract too)

// Numbers
const cardNumber = nftID % 13 + 1;
await addLayer('Numbers', cardNumber, attributes, ctx);
// Suits
const suitRef = nftID % 4;
const arr = ['Spades','Hearts','Diamonds','Clubs'];
const suit = arr[suitRef];
await addLayer('Suits', suit, attributes, ctx);

Custom rarity with some randomness

let character = 'Jack';
if (Math.random() > 0.7) character = 'Jill';
if (Math.random() > 0.99) character = 'James';
await addLayer('Characters', character, ctx);

Super rare one offs (Will front-load the rare NFT's to earlier ID's)

const arr = ['Human','Ape','Mutant','Punk','Loogie']; // put this array outside of the loop at the top of the script
const attr = arr[Math.floor(Math.random()*arr.length)];
if (attr === 'Punk') arr.splice(3,1); // removes Punk at array index 3 (starts at 0) out of the array
await addLayer('AvatarType', attr, ctx);

Super rare one offs better method

const arr = ['Human','Ape','Mutant','Punk','Loogie'];
let attr = arr[Math.floor(Math.random()*arr.length)];
const alienID = Math.floor(Math.random() * 10000);
if (nftID === alienID) attr = 'Alien';
await addLayer('AvatarType', attr, ctx);

Specific traits for specific ID's

const arr = ['Happy','Sad'];
let mouth = arr[Math.floor(Math.random()*arr.length)];
if (nftID.toString().includes(420)) mouth = 'Smoking'; 
await addLayer('Eyes', mouth, ctx);

Add Numeric Attributes With No Image Layers

const strength = Math.floor(Math.random()*99);
ctx.attributes.push({ 'trait_type': 'Strength', 'value': strength });

Add an image layer or filter but no attribute

const img = await canvas.loadImage(`${dir.input}/vignette.png`);
ctx.drawImage(img,0,0,imageSize.width,imageSize.height);

Feel free to add more examples above this line via a pull request.

The generator outputs two directories output/hdimages/ and output/images/

The HD images are the raw output of the generator. The output/images directory holds compressed images.

Compression is useful as uploading 10,000 high res images to IPFS is about as much fun as [redacted].

You can change the compression settings to make the images higher quality or lower file size.

High Quality Larger Size

    plugins: [imageminPngquant({quality: [0.5, 0.7]})]

Low Quality Smaller Size

    plugins: [imageminPngquant({quality: [0.3, 0.5]})]

More options and spec here: https://github.com/imagemin/imagemin-pngquant#readme

There's more info on blockchain development and NFT's on my blog at https://jamesbachini.com

To upload your NFT's to IPFS check out https://nft.storage or https://www.pinata.cloud/

For creating the smart contract check out OpenZepellin's ERC721 token library and documentation: https://docs.openzeppelin.com/contracts/4.x/erc721

For compiling and deploying the contract you can use https://remix.ethereum.org