How to make NFT Art with On-Chain Metadata | FULL HARDHART / JS TUTORIAL! (w/ Polygon & Opensea)
Introduction
In this tutorial, we will explore the world of creating NFT (Non-Fungible Token) art using SVGs (Scalable Vector Graphics) and generating on-chain metadata. We will leverage the power of Chainlink VRF (Verifiable Random Function) to add randomness and true scarcity to our NFTs. We will use Hardhat, JavaScript, and Solidity to develop customized smart contracts that will be deployed on the Polygon chain. By the end of this tutorial, you will have a complete understanding of how to create and deploy your own NFT art with on-chain metadata.
Quickstart & Install Requirements
Before we get started, let's quickly go over the requirements for this tutorial and how to set up your development environment. We will need Hardhat, Node.js, and a code editor installed. We will also make use of the OpenZeppelin library for smart contract development. Follow the instructions provided in this section to install all the necessary tools and dependencies.
View Static SVG Deployed NFT on OpenSea
To kick off our tutorial, we will first learn how to deploy a static SVG-based NFT to the Polygon chain and view it on the OpenSea marketplace. We will walk through the steps of setting up the necessary smart contract, creating an SVG image, and deploying it to the blockchain. Finally, we will verify that our NFT is visible and tradable on OpenSea.
View RandomSVG on OpenSea
In this section, we will take our NFT art creation to the next level by introducing randomness. We will explore how to generate random SVGs using Chainlink VRF and create truly unique and scarce NFTs. We will modify our smart contract to incorporate the randomness functionality, deploy it to the Polygon chain, and verify that the randomly generated SVG NFTs can be viewed and traded on OpenSea.
Static SVG NFT Setup
Before we delve into the details of creating NFTs with random SVGs, let's first set up the foundation for our static SVG NFTs. We will define the required smart contract, SVGNFT.sol, and make use of the OpenZeppelin library for contract standardization. We will go through the contract code and explain the essential functions and variables needed for our static SVG NFTs.
Creating an NFT and SVG Intro
To create NFTs, we need to understand the basics of SVG image generation and its integration with our smart contracts. In this section, we will introduce the concept of SVGs and how they can be used to represent images in a scalable and programmable manner. We will also explain how to integrate SVG generation into our NFT smart contracts.
svgToImageURI (Base64 Encoding)
To incorporate SVG images into our NFT metadata, we need to convert SVGs into a format that can be stored and displayed on-chain. We will learn about Base64 encoding and how to convert SVGs to image URIs using JavaScript. This process will allow us to include SVG images in the metadata of our NFTs.
formatTokenURI
In this section, we will define a function to format the metadata URI for our NFTs. We will use this function to combine the SVG image URI and additional metadata details into a properly formatted JSON object. This formatted token URI will be stored on-chain and will provide all the necessary information about our NFTs.
01_deploy_svgnft.js
Now that we have our smart contract and helper functions in place, we will deploy our SVGNFT contract to the Rinkeby Testnet. We will write a deployment script using JavaScript and Hardhat to deploy our contract and initialize it with the required parameters. This script will deploy the SVGNFT contract and provide us with the contract address.
Deploying to Rinkeby Testnet
With our deployment script ready, we will now execute the deployment process to the Rinkeby Testnet. We will use Hardhat to deploy our SVGNFT contract and ensure that everything is functioning correctly. We will also verify the contract on the Rinkeby Etherscan to make it publicly accessible.
Viewing on OpenSea
Once our SVGNFT contract is deployed and verified on the Rinkeby Testnet, we can proceed to view our NFTs on the OpenSea marketplace. We will connect our deployed contract to OpenSea and ensure that our static SVG NFTs are visible, with their metadata correctly displayed.
RandomSVG.sol
Now that we have successfully created and deployed static SVG NFTs, let's move on to the exciting part of generating random SVGs. We will introduce a new smart contract, RandomSVG.sol, which will handle the random SVG generation process. We will explain the structure and functions of this contract and how it integrates with Chainlink VRF.
Gameplan for Random SVGs
Before we dive into the implementation details, let's outline our gameplan for generating random SVGs. We will discuss the steps involved in creating unique SVG images using random elements, such as colors, shapes, and patterns. Understanding the overall process will help us tackle the implementation more effectively.
Create Function & Chainlink VRF
In this section, we will implement the create function in our RandomSVG contract. This function will initiate the request to Chainlink VRF, which will provide us with a random number used for generating the SVG image. We will explore how to integrate Chainlink VRF into our contract and handle the callback for random number generation.
FulfillRandomness
After initiating the Chainlink VRF request, we need to handle the callback function, fulfillRandomness. This function will receive the random number generated by Chainlink and use it to generate a unique SVG image. We will implement the fulfillRandomness function and explore how to leverage the random number for SVG generation.
finishMint
Once we have generated the random SVG image, we need to complete the minting process for our NFT. We will implement the finishMint function, which will finalize the minting process by assigning the SVG image to the NFT and updating the metadata. We will also explore how to update the token URI and make it accessible on-chain.
generateSvg
To generate the SVG image, we will implement the generateSvg function in our RandomSVG contract. This function will utilize the random number received from Chainlink VRF and combine it with various SVG elements to create a unique and visually appealing image. We will discuss the different components of the SVG and how to customize them based on the random number.
generatePath
One crucial aspect of SVG generation is the path element, which defines the shape and outline of our image. We will implement the generatePath function to create random paths for our SVGs. We will explore different path commands and how to adjust them based on the random number.
generatePathCommand
Within the generatePath function, we will implement the generatePathCommand helper function. This function will generate a random path command based on the given parameters, such as direction and length. We will discuss the available path commands and how to incorporate them into our SVG generation process.
Grabbing the Final Functions
With all the necessary functions implemented, we will now grab the final versions of the create, fulfillRandomness, finishMint, generateSvg, generatePath, and generatePathCommand functions. We will ensure that all the components are working together seamlessly to generate random SVGs for our NFTs.
02_deploy_random
SVG.js
Now that we have our RandomSVG contract and its associated functions ready, we need to deploy it to the Rinkeby Testnet. We will create a deployment script, 02_deploy_randomSVG.js, using JavaScript and Hardhat. This script will handle the deployment process and provide us with the contract address for our RandomSVG NFTs.
Mocking Contracts
Before deploying our RandomSVG contract, we need to set up some mock contracts for testing purposes. We will create mock contracts for Chainlink VRF and OpenZeppelin's ERC721 implementation. These mock contracts will simulate the behavior of the actual contracts and allow us to test our RandomSVG contract in a controlled environment.
Finishing the Script
In this section, we will complete the deployment script (02_deploy_randomSVG.js) by adding the necessary code to deploy our RandomSVG contract and initialize it with the required parameters. We will also verify the contract on the Rinkeby Etherscan to make it publicly accessible.
Deploying to Rinkeby & OpenSea
With our deployment script ready, we can now execute the deployment process for our RandomSVG contract on the Rinkeby Testnet. Once deployed, we will verify that our RandomSVG NFTs are visible on the OpenSea marketplace and that their metadata is correctly displayed.
Deploy to Polygon Mainnet & Set Price
Now that we have successfully deployed and tested our NFTs on the Rinkeby Testnet, we can proceed to deploy them on the Polygon Mainnet. We will modify our deployment script to target the Polygon network and execute the deployment process. Additionally, we will set a price for our NFTs to enable trading and selling on the Polygon network.
You have learned how to create NFT art with on-chain metadata using SVGs and Chainlink VRF. You have gained hands-on experience with Hardhat, JavaScript, and Solidity to develop customized smart contracts. You have deployed your NFTs to both the Rinkeby Testnet and the Polygon Mainnet, allowing them to be viewed and traded on the OpenSea marketplace. Now you can continue exploring the fascinating world of NFT art and expand upon what you have learned here.
