velvet-shark / balls-of-art-tutorial

Balls of Art Workshop

This repository is for a Balls of Art workshop.

Outline

• Balls of Art Workshop
  • Outline
  • What We Are Going to Create
    • OpenSea NFT Collection Based on Workshop Code
    • SVG Resources
  • Getting Started
    • Environment Variables for APIs
  • Development
    • Compile Contract
    • Deploy to Local Blockchain
    • Deploy to Goerli
  • Resources
  • Next Steps

What We Are Going to Create

Balls of Art is an NFT collection that should serve as a basis to learn SVG-based, fully on-chain NFTs, and as a first step to start creating your own generative art NFTs. It shows in a clear, high-quality, yet simple way:

• How to structure an NFT project
• How to (pseudo) randomize
• How to draw simple SVGs
• How to start playing with SVG animation
• How to create a very simple generative art with all of the above

Elements that will be randomized:

OpenSea NFT Collection Based on Workshop Code

Visit https://testnets.opensea.io/collection/the-balls-of-art.

SVG Resources

• Beginner tutorial: HTML SVG Graphics at W3Schools
• Intermediate: SVG Tutorial at Mozilla Developer Network

Getting Started

Clone the repository:

git clone https://github.com/velvet-shark/balls-of-art-tutorial.git balls-of-art-tutorial

Install dependencies:

cd balls-of-art-tutorial
yarn

Environment Variables for APIs

Everything is ready for development, you just need to fill in the data in the .env file.

• At the very least you'll need:
  • QUICKNODE_API_KEY_GOERLI for connecting to the blockchain.
  • PRIVATE_KEY for deploying the contract to a testnet.
• ETHERSCAN_API_KEY is not strictly required, but since this example does not include a frontend UI for minting we will verify the contract and manually mint an NFT on Etherscan.

cp .env.example .env

• For QuickNode API, register for a free account at https://www.quicknode.com/ and select a Goerli Testnet endpoint.
• For Etherscan API, register at https://etherscan.io/register, then go to https://etherscan.io/myapikey and create a free API key.

Development

Compile Contract

Test if everything compiles properly:

yarn hardhat compile

Deploy to Local Blockchain

Start a local blockchain node and deploy to localhost:

yarn hardhat node
yarn hardhat run scripts/deploy.js --network localhost

Deploy to Goerli

To deploy to Goerli, uncomment the following code in hardhat.config.js:

goerli: {
  chainId: 5,
  url: `${process.env.QUICKNODE_API_KEY_GOERLI}`,
  accounts: [`${process.env.PRIVATE_KEY}`]
}

Then run the deploy.js script with goerli passed to the --network flag:

yarn hardhat run scripts/deploy.js --network goerli

Verify the contract on Etherscan:

npx hardhat verify --network goerli "CONTRACT_ADDRESS"

Resources

How to Write a Good NFT Smart Contract (a written guide) - a 73-point checklist to run your NFT smart contract against. A set of best practices when writing NFT contracts on Ethereum.

How to Write a Good NFT Smart Contract (YouTube video) - same as above, but in a 4-part video (Part 1), (Part 2), (Part 3), (Part 4)

Next Steps

This is only the first step, meant to show how to play with SVGs, add randomization, start creating on-chain NFTs. Things you can do next:

• Create a more complex art structure
• Take input from the user to create art with input as part of the equation (number of rows? different shapes? favorite color? emoji to insert into the NFT?)
• Add true randomization (e.g., with Chainlink VRF, Provably Fair Random Number Generator)
• Learn more complex SVG
• Add more animation
• Create a front-end and an engaging minting page and process
• Create more art

Let me know what you have created. I'd love to see it! You can find me on Twitter @velvet_shark.