Demo: near-nft-generative-website.netlify.com
What Are We Looking At Here?
This is website with a “generative design.” This is accomplished by a seed algorithm that takes a random hash, which is stored on-chain in the metadata of an NFT. I used the NEAR protocol for this experiment, a climate-neutral layer 1 blockchain. Anyone can mint one of these NFTs for free (it’s running on testnet), and they will change the design by doing so. It costs about 20 cents to mint an NFT. Compare that to anywhere from 20–200 dollars to mint something on the Ethereum mainnet.
How it Works
With every reload the colors on the squares are re-organized. This (hopefully) makes it a fun experience for those perhaps unaware of this document or are simply not interested in minting an NFT.
Everything else is driven by the seed hash, and the website will use the last minted token’s hash. So put simply, click ‘mint,’ enter your hash, and as soon as the transaction goes through, you’ll see the website’s design has changed.
There are different rarities for the color scheme and grid attributes. Some more rare than the others. Mint a couple NFTs and see what you get!
Motivation
This all started when I saw Tyler Hobbs’ Fidenza collection which centers around the use of flow fields. I found this concept really interesting and started to dig into how minting a “generative art” NFT works.
Many of the NFT contracts on OpenSea, Looks Rare, etc, are using IPFS to host a json file that contains the metadata for a given NFT token. When a piece of (for lack of a better word) “jpeg art” is minted, a link is created to a json file hosted (typically) on IPFS that describes the metadata.
Projects like Fidenza and the others on ArtBlocks take a different approach where a seed algorithm is stored on-chain, and the art pieces are minted from the seed, which drives the creation of a completely new and original piece of art.
Instead of storing an entire algorithm on-chain, I figured since I was creating essentially a dynamic website as opposed to a singular image, I could just store a random hash, and have the implementation algorithm exist on the website.
I was also interested in doing all this on some chain other than Ethereum. I settled on NEAR in-part because it’s a climate neutral chain, but also because I wanted to experiment with contracts written in Rust instead of Solidity.
Challenges and Process
I am typically a UI developer; I am not an artist or a much of a numbers guy. Tyler uses Processing/p5.js, which is a language and accompanying Javascript library, respectively, that are geared to visual artists. When using p5.js in the browser, under the hood you are taking advantage of canvas, which is better-geared for this kind of thing, but learning p5.js was out of the scope of this experiment, so I settled on using good ol’ divs.
Since a git hash has a length of 40 characters, I decided 40 divs was an elegant solution, and still gave me a lot of artistic and performance freedom to play around with.
The above article from Tyler states that “flow fields are based around grids.” I decided to start with a grid, some colors, and some basic transforms. If I had time I’d add some curvature, but ultimately I didn’t have time to do that. While adding curvature would be interesting, but at this point I’m actually more interested in learning Processing 😄.
Top comments (0)