Created by Hashlips! In this repository, Hashlips and ScrawnyViking teach you how to create your unique randomly generated NFTs and launch them on to a free Github Domain where people can buy your NFTs from

Overview

Thank You HashLips ๐Ÿ‘„ Upgraded and Articulated by ScrawnyViking aka TWECryptoDev

All the code in these repos was created and explained by HashLips - Please go subscribe to him if you want to learn how to code your own DApps and do everything from scratch! โค๏ธ

If you're brand new and want a step by step dummy version tutorial of how to install and do everything, watch my last video here... We're going to go fast in this video and is for people who know how to run a terminal and type basic commands. https://www.youtube.com/watch?v=5s6-eMAOORQ

To find out more please visit:

๐Ÿ“บ YouTube

๐Ÿ’ฌ Telegram

๐Ÿฆ Twitter

โ„น๏ธ Website

๐Ÿ TBC Token Pre Sale NFTs

๐Ÿ The Bee Collaborative rng NFT

Game and Roadmap Coming Soon

ScrawnyViking A-Z How to Launch your own NFT Collection using HashLips Art Engine ๐Ÿ”ฅ

Create generative art by using the canvas api and node js. Before you use the generation engine, make sure you have node.js and yarn installed.

Installation ๐Ÿ› ๏ธ

If you are cloning the project then run this first, otherwise you can download the source code on the release page and skip this step.

git clone https://github.com/TomorrowWontExist/ArtGenerator

Go to the root of your folder and run this command if you have yarn installed.

yarn install

Alternatively you can run this command if you have node installed.

npm install // I prefer NPM over Yarn

Usage โ„น๏ธ

Create your different layers as folders in the 'layers' directory, and add all the layer assets in these directories. You can name the assets anything as long as it has a rarity weight attached in the file name like so: example element#70.png. You can optionally change the delimiter # to anything you would like to use in the variable rarityDelimiter in the src/config.js file.

Once you have all your layers, go into src/config.js and update the layerConfigurations objects layersOrder array to be your layer folders name in order of the back layer to the front layer.

Example: If you were creating a portrait design, you might have a background, then a head, a mouth, eyes, eyewear, and then headwear, so your layersOrder would look something like this:

const layerConfigurations = [
  {
    growEditionSizeTo: 10, // Example to show you the inifite amount of possibilities.
    layersOrder: [
      { name: "1-background" },
      { name: "2-extra" },
      { name: "3-character" },
      { name: "4-prop" },
      { name: "5-expression" },
      { name: "6-face" },
    ],
  },
];

The name of each layer object represents the name of the folder (in /layers/) that the images reside in.

Optionally you can now add multiple different layerConfigurations to your collection. Each configuration can be unique and have different layer orders, use the same layers or introduce new ones. This gives the artist flexibility when it comes to fine tuning their collections to their needs.

Example: If you were creating a portrait design, you might have a background, then a head, a mouth, eyes, eyewear, and then headwear and you want to create a new race or just simple re-order the layers or even introduce new layers, then you're layerConfigurations and layersOrder would look something like this:

const layerConfigurations = [
  {
    growEditionSizeTo: 10, // Example to show you the inifite amount of possibilities
    layersOrder: [
      { name: "1-background" },
      { name: "2-extra" },
      { name: "3-character" },
      { name: "4-prop" },
      { name: "5-expression" },
      { name: "6-face" },
    ],
  },
  {
    growEditionSizeTo: 15, // 5 more like this, added eyewear
    layersOrder: [
      { name: "1-background" },
      { name: "2-extra" },
      { name: "3-character" },
      { name: "4-prop" },
      { name: "5-expression" },
      { name: "6-face" },
      { name: "7-eyewear" },
    ],
  },
  {
    growEditionSizeTo: 25, // 10 more, added headpiece
    layersOrder: [
      { name: "1-background" },
      { name: "2-extra" },
      { name: "3-character" },
      { name: "4-prop" },
      { name: "5-expression" },
      { name: "6-face" },
      { name: "7-eyewear" },
      { name: "8-headpiece" },
    ],
  },
]; // Now you can go and rename the pngs to which ever number you want them to be, to make the order more mixed.

Then optionally, update your format size, ie the outputted image size, and the growEditionSizeTo on each layerConfigurations object, which is the amount of variation outputted.

If you want to play around with different blending modes, you can add a blend: MODE.colorBurn field to the layersOrder object. If you need a layers to have a different opacity then you can add the opacity: 0.7 field to the layersOrder object as well. Both the blend: MODE.colorBurn and opacity: 0.7 can be addes on the same layer if you want to.

Here is an example on how you can play around with both filter fields:

const layerConfigurations = [
  {
    growEditionSizeTo: 5,
    layersOrder: [
      { name: "1-background" },
      { name: "2-extra" },
      { name: "3-character", blend: MODE.colorBurn },
      { name: "4-prop" },
      { name: "5-expression" },
      { name: "6-face", blend: MODE.overlay, opacity: 0.7 },
      { name: "7-eyewear", opacity: 0.7 },
    ],
  },
];

Here is a list of the different blending modes that you can optionally use.

const MODE = {
  sourceOver: "source-over",
  sourceIn: "source-in",
  sourceOut: "source-out",
  sourceAtop: "source-out",
  destinationOver: "destination-over",
  destinationIn: "destination-in",
  destinationOut: "destination-out",
  destinationAtop: "destination-atop",
  lighter: "lighter",
  copy: "copy",
  xor: "xor",
  multiply: "multiply",
  screen: "screen",
  overlay: "overlay",
  darken: "darken",
  lighten: "lighten",
  colorDodge: "color-dodge",
  colorBurn: "color-burn",
  hardLight: "hard-light",
  softLight: "soft-light",
  difference: "difference",
  exclusion: "exclusion",
  hue: "hue",
  saturation: "saturation",
  color: "color",
  luminosity: "luminosity",
};

When you are all ready, run the following command and your outputted art will be in the build/images directory and the json in the build/json directory:

npm run build

or

node index.js

The program will output all the images in the build/images directory along with the metadata files in the build/json directory. Each collection will have a _metadata.json file that consists of all the metadata in the collection inside the build/json directory. The build/json folder also will contain all the single json files that represent each image file. The single json file of a image will look something like this:

{
  "dna": "614932c9807faa6f1db822bde13daa33b881c34a",
  "name": "#1",
  "description": "This is the description of your NFT project, remember to replace this",
  "image": "ipfs://QmNfPMWLPTEbFpBtPFy4wkYEHRVWcz8dzjziTcPbebzF53/1.png",
  "edition": 1,
  "date": 1632176579874,
  "attributes": [
    {
      "trait_type": "1-background",
      "value": "astronaut"
    },
    {
      "trait_type": "2-extra",
      "value": "none"
    },
    {
      "trait_type": "3-character",
      "value": "Twee Pink Wings"
    },
    {
      "trait_type": "4-prop",
      "value": "soda"
    },
    {
      "trait_type": "5-expression",
      "value": "neutral"
    },
    {
      "trait_type": "6-face",
      "value": "gasmask"
    }
  ],
  "compiler": "HashLips Art Engine"
}

That's it, you're done.

Updating baseUri for IPFS

You might possibly want to update the baseUri after you have ran your collection. To update the baseUri simply run:

node utils/updateBaseUri.js

Printing rarity data (Experimental feature)

To see the percentages of each attribute across your collection, run:

node utils/rarityData.js

The output will look something like this:

Trait type: 1-background
{ trait: 'acryllica', chance: '16', occurrence: '8' }  
{ trait: 'astronaut', chance: '16', occurrence: '20' } 
{ trait: 'badacid', chance: '16', occurrence: '20' }   
{ trait: 'bluespiral', chance: '16', occurrence: '28' }
{ trait: 'dancefloor', chance: '16', occurrence: '8' } 
{ trait: 'lightening', chance: '16', occurrence: '16' }

Trait type: 2-extra
{ trait: 'blue explosion', chance: '15', occurrence: '16' }
{ trait: 'christmas lights', chance: '15', occurrence: '20' }
{ trait: 'devil tail', chance: '5', occurrence: '4' }
{ trait: 'dinosaurs', chance: '15', occurrence: '16' }
{ trait: 'none', chance: '35', occurrence: '28' }
{ trait: 'polaroids', chance: '10', occurrence: '12' }
{ trait: 'spooky', chance: '5', occurrence: '4' }

Hope you create some awesome artworks with this code ๐Ÿ‘„ Thank you Hashlips! Created by Hashlips, edited and articulated by ScrawnyViking

When you're all finished with your NFT's here, and we update your metadata .json files to the correct CID that we're going to go over in the video... NOW, we want to get the DApp (Minting Station with web3 connect) attached to your contract that we're about to deploy.

run this command to get ScrawnyVikings Minting Station DApp

git clone https://github.com/TomorrowWontExist/MintingStationDApp.git

once it's downloaded, open the folder from your terminal and Follow the read me instructions provided, or keep watching the video!!

You might also like...

CLI to to solve your Wordle puzzle daily

CLI to to solve your Wordle puzzle daily

๐Ÿ“Ÿ CLI to to solve your Wordle puzzle daily. Learn to build Node.js CLI apps. wordle-solved-cli ๐Ÿ“ฆ CLI that solves Wordle puzzles for you ๐Ÿคฏ Automatic

Feb 2, 2022

Wordle but it's on your Terminal!

Wordinal Wordle but it's on your Terminal! What's Wordle? ๐Ÿค” Wordle is a classic word guessing game developed by Josh Wardle. Players have six attempt

Apr 12, 2022

Snake game using pure HTML, CSS and JavaScript with GameBoy look and feel using Nano editor

Snake game using pure HTML, CSS and JavaScript with GameBoy look and feel using Nano editor

Snake game using pure HTML, CSS and JavaScript with GameBoy look and feel using Nano editor. 100% commented code in Portuguese

Jul 2, 2022

Quizpetitive - A quiz game to learn new knowledge and terms in the field of project management.

Quizpetitive - A quiz game to learn new knowledge and terms in the field of project management.

Quizpetitive A quiz game to learn new knowledge and terms in the field of project management. The key element to the success of this project was the c

May 16, 2022

A clone of the popular game Wordle made using React, Typescript, and Tailwind

Wordle Clone Go play the real Wordle here Read the story behind it here Try a demo of this clone project here Inspiration: This game is an open source

Jan 8, 2023

Wordle2Townscaper is meant to convert Wordle tweets into Townscaper houses using yellow and green building blocks.

Wordle2Townscaper is meant to convert Wordle tweets into Townscaper houses using yellow and green building blocks.

Wordle2Townscaper Wordle2Townscaper is meant to convert Wordle tweets into Townscaper houses using yellow and green building blocks. You can download

Nov 2, 2022

GameApp is a web application that allow users to play nostalgic games such as minesweeper, flappybird, and space invasions.

GameApp is currently being developed. GameApp is a web application that allow users to play nostalgic games such as minesweeper, flappybird, and space

Feb 21, 2022

The Snake Game implemented using HTML, CSS, and JavaScript

The Snake Game implemented using HTML, CSS, and JavaScript

The Snake Game implemented using HTML, CSS, and JavaScript

Mar 2, 2022

A trivia website game based on origin of objects and concepts from around the world

Origin guesser is a quiz/trivia game in which the user is presented a word, object, or flag and offered a series of multiple choice answers to choose from as to the origin of that concept. Unlike other trivia games, this is concentrated only on origin of objects and concepts questions.

Feb 12, 2022
Owner
TomorrowWontExist
TWECryptoDev HQ - The future of Crypto is Truth and Transparency.. Who can we trust?
TomorrowWontExist
A checklist created for the online game Lost Ark

A checklist created for the online game Lost Ark. Create and complete daily/weekly tasks you assign to your characters!

null 5 May 24, 2022
Latin Wordle is a free and open-source project that aims to provide a fun and interactive way to learn Latin.

Latin Wordle Live Game Here Inspiration Latin Wordle is a free and open-source project that aims to provide a fun and interactive way to learn Latin.

null 15 Dec 16, 2022
Excalibur.js 1.3k Dec 30, 2022
The extension to help you when you badly don't want to mess up your wordle streak

Your last resort in woordle to maintain your woordle win streak

Sreecharan 2 Feb 3, 2022
LittleJS Logo LittleJS - The Tiny JavaScript Game Engine That Can

The Tiny JavaScript Game Engine That Can! ??

Frank Force 2.4k Dec 31, 2022
Golf it! is a game designed to let you show off your code-fu by solving problems

Golf it! Golf it! is a game designed to let you show off your code-fu by solving problems in the least number of characters โœจ Explore the docs ยป View

Ashikka Gupta 5 Aug 18, 2022
WORDLEBOARD prototype: Show your Wordle game on a Vestaboard as you play.

WORDLEBOARD prototype Show your Wordle game on a Vestaboard as you play. Copyright (c) 2022, Scott Schiller. MIT license. Made with love and fun in mi

Scott Schiller 7 Dec 20, 2022
๐ŸŸฉ in case you want to cheat on your wordle games

Wordle Solver How to use Enter each right guess in the first grid Enter all letters that you know aren't in a certain position in the second grid For

James Zhang 2 Feb 7, 2022
A Wordle-like game where you have to guess the unsigned 8-bit binary number

Bytle A Wordle-like game where you have to guess the unsigned 8-bit binary number! Game coded in 2h 14m 50.570s, but it's not like I'm counting how lo

James Livesey 16 Jun 30, 2022
Provides 5 keywords with which to narrow down your wordle game. I ruin nice things.

Widdle?? I hate fun so I wrote a script that ruins Wordle. This script can be used to find a Widdle, a set of five words that cover nearly all letters

Tess Myers 3 Mar 12, 2022