Nameless Youth Club Development Structure

Python Scripts

./python-svg-work/scripts

Main achievements

1. RLE Creation: Broke down original image using python image library in order to generate RLE (row line endcoding) for each component (head, jacket, skin). This is done using the cImage.py library. To print RLE from a component PNG file run python3 componentToRLE.py and follow prompts

RLE encoding

Based off of Nouns Dao, components are encoded using a row line encoding technique where an image is built from left to right using pairs of pixel length and color index in a pallette.

2. Palette Generation: created color palletes using machine learning techniques to maintain depth of original image coloring with different base colors

Hardhat Project

Contract structure

./contracts

NYCDescriptor

• holds component RLE as arrays of uint256
• holds component color pallette stored as an array of strings
• defines ERC-721 Token URI through the ERC-721Storage standard from openzeppelin
• handles minting new NFTs using a seed generated by the NYCSeeder and an ipfs url
• handles rendering svg file containing nft art completely on-chain

NYCSeeder

• randomly creates a seed for a new NFT
  • a seed is an array of integers representing indexes of attributes for the new NFT

Node Driver

./server

helper endpoint

[url]/handle

takes svg text sent from a POST request from frontend react application and creates a svg file to pin to IPFS using Pinata. On success, pinata returns hash which is used as the ipfs url for the NFT's URI.

[url]/*

serves the entire application front end

React Frontend

• Checks for wallet and network on browser

• alerts if no wallet / wrong network

• displays owned NFTs by signed in user

• mints NFT by:

  1. calling Seeder Contract
  2. getting each component RLE from NYCDescriptor Contract using indexes from seed
  3. creating a seed Javasscript object with these RLE components

    const mySeed = {
    skin: skin, 
    skinPalette: skinPalette,
    jacket: jacket,
    jacketPalette: jacketPalette,
    head: head,
    headPalette: headPalette
    }  
  

  4. create svg text using component RLE (logic is found in ./react-frontend/src/functionality/RLEtoSVG.js)
  5. post request to /handle endpoint to get ipfs url
  6. finally call Descriptor method using original seed and ipfs url

  Hosting

  the application is hosted using Heroku and is live on page: nyc-splash-page.herokuapp.com