NSFW: DinoNouns | Interactive On-chain NFT

[neroone]

NSFW: DinoNouns | Interactive On-chain NFT

TL;DR

• Develop an interactive NFT experience using Nouns assets (Dino head-based Nouns)
• On-chain interactive NFT leveraging animation_url in NFT metadata
• On-chain HTML, CSS and JS with option for customization
• Sandbox for creating a new interactive experience for the Nouns ecosystem
• 2 months of work for refining, adding features, and open-sourcing

Ideas ⌐◨-◨

Ohaiii NounsDAO, I’m Nero One, an active member of NounsMY!

I love to experiment and explore different mediums and NFT, it opens up a new way of doing even more than we could before.

I’ve seen some of the stuff people have been doing in the space and it inspires me a lot! But I saw a lack of creation/innovation in terms of interactive NFT.

The “WHAT IF”

So I’ve been thinking, what if DinoNouns can be interactive and at the same time the whole thing is all on-chain? What if we can teach the character some words so it can reply us back? Make it jump? Perhaps changing the DinoTerminal skins? It would be cool to play with!

Before I continue, here’s a quick note on my past projects:

Past Project

I’ve worked on several Interactive NFT projects and most of it was off-chain, COMLINK+ (pointed to a hosted site), tulsv1 (uploaded to IPFS).

Fully On-Chain?

However this time I wanted to fully put the whole HTML on-chain + interactive.

So to achieve this, all assets need to be encoded in base64 (HTML, CSS, JS, fonts) and to be included in the smart contract. Oh and I’m using vanilla HTML, CSS and JS to make it simple as possible without any other dependencies.

Nouns SVG

For Nouns SVG generation, I’m currently using NounsDescriptorV2 contract to generate on-chain SVG for DinoNouns. To be used in both of the image (in teh metadata) and in the HTML itself.

Seed for the generation is based on Dino name and tokenId of the NFT:

uint256 pseudorandomness = uint256(keccak256(abi.encodePacked(_name, _id)));

Dynamic NFT?

Each Dino name is stored on-chain and to change it, you’re required to interact with the DinoNouns contract. Changing name will reroll the Dino .

Do you want to re-skin your DinoTerminal? You can do it! Customize your CSS and put that into the contract! Oh, it’s token mapped. So if you do for your token, only u get the custom CSS!

Summary ⌐◨-◨

Vision

The token is the canvas - Nahiko

To bring awareness on on-chain interactive NFT and how the community can utilise it

Objective

1. NounsDAO community can fork, experiment and play with their own idea/interaction they want to bring into their project.
2. Opening up new possibilities for future Nouns fork to embed interaction within the project

Strategy

1. Build HTML-based interaction with UI/UX
2. Create smart contract architecture for the on-chain interaction and utilisation of HTML, JS and CSS.
3. Make use of the existing Nouns ecosystem [NounsDescriptor and NounsSeeder]
4. Refine the codebase for future fork
5. Open-source it!

Deliverables

1. I have built the MVP (minimum viable product) for the project. This includes:
   • UI/UX Design
     • Figma
       
       
   • Interactive HTML Page demo deployed on Surge
     • Demo
       
       
   • Deployed initial prototype on Goerli Testnet
     • Goerli DinoNouns
     • Testnet OpenSea
     • DinoNoun-0 on Testnet OpenSea
       
       
   • Smart contract architecture
     • FigJam
       
       
   • Contract deployment on Mainnet
     • DinoNouns
     • DinoRenderer
     • DinoUtility
   • DinoNouns collection on OpenSea and minted 3
     • DinoNouns OpenSea
     • DinoNouns-0 on OpenSea
       
       
   • GitHub repo for the project (work in progress)
     • dino-nouns
2. Report and updates will be posted on my social media and discourse.
3. Refine, add features and prepare the repo for open-source
   • dino-nouns

Features

• Text-based command interaction
• Dynamic on-chain name
• CSS Animation
• Utility commands
• Dynamic favicon and title (only if you view it in a separate tab)
• Custom CSS
• Teach your dino wordsssss~
• Commands have a 30% chance to fail - hehehehe
• Map commands to button
• Use keyboard shortcut [a,b,x,y] for the buttons
• and more…

Commands

List of commands

Command	Desc	Usage	eg
/dino	give temporary nickname	/dino [name]	/dino abu
/run	make dino run	/run	/run
/jump	make dino jump	/jump	/jump
/clear	clear logs	/clear	/clear
/reset	reset to default dino	/reset	/reset
/map	map command to button	/map [btn][command]	/map a run
/teach	teach your dino words!	/teach [word] [reply]	/teach yo whatsupp!
/help	help command	/help [command]	/help [cmd]
[any]	dino will say it back	[any]	hi
nouns	Link to nouns.wtf	nouns	nouns
center	Link to nouns.center	center	center

You can create yours too if you fork the project!

Budget Breakdown ⌐◨-◨

I’m asking for:

• 6 ETH - Work done for the current MVP on deliverables
• 4 ETH - Work done for deliverables 2 and 3 (December 2022)

Payable to neroone.eth || 0xA6c0F7bde119930fB919ed02F8155887EcF0D756

oh ya guysss, please let me know about anything~

Thank you for reading. wohohoooooooo~

p/s: Thanks to @Voadz, my fellow NounsMY for helping out!

[neroone]

Example of the on-chain customization:

Custom name for each token id

Here I’m changing the Dino name from the default DinoNouns-1 to miao

Link to the setDinoName function on contract

Custom CSS for each token id

Next is custom CSS for DinoNouns-2

here’s the CSS code i use to custom it it’s token-mapped. so u can custom for your own token!

*{--primaryColor:chartreuse;--accentColor:blueviolet}body{filter:invert(1);background-color:#1e282a}

Link to the setCustomCSS function on contract

Just a quick update. Thanks everyone!

[Sam]

Just wanted to see if you have talked to the composables team who have a prophouse up right now:

Prop House

[neroone]

hi @Sam!, no not yet. I was deep working on this mostly this month lol.

Oh their proposal is coooool! will look into it!

[neroone]

Progress and content dump

• Deployed html renderer contract

  • Test on Goerli

• First initial prototype HTML

  • uses CloudNouns API for SVG generation

  • 

• Link to twitter video

  • 

• started working on a mockup design

  • Figma

  • 

  • 

• translated most some of the design to code

• deployed to surge for testing

  • demo

• added map cmd, so u can map the button to command. so no need retype every time

• tried deploying the renderer contract for dinonouns

• doesn’t work because of localStorage blocked on opensea

• removed the localStorage, so no state saving for the dino, it works now

  • testnet 1

• deployed new NFT contract on goerli

  • testnet 2

• added on-chain dino name

• token owner can use setDinoName(string,uint) to change their dino name on the contract.

• added custom CSS feature. here are some of the test.

  • 
  • 
  • 

• token owner can use setCustomCSS(string,uint) to add custom CSS for their dinoTerminal.

  • eg: "*{color:red}" - will set the text to red

• deployed contract to mainnet

  • DinoNouns
  • DinoRenderer
  • DinoUtility

• Minted 3 NFT from the DinoNouns collection so that community could play with it.

  • DinoNouns OpenSea
  • 

• made a proposal in NounsDAO Small Grants discourse

[ncc]

Love the art, cool project – Took me a bit of digging through all the links to find your demo and designs, so I put them all together in a card here to make it easier for people to see all the work you’ve done! Good luck with the proposal.

[neroone]

thanks ncc! appreciate your effort to compile those into seam cards! waaaa. can’t thank you enough!

[neroone]

sorry for tagging you, @noun22

I need some feedback on this to check if the retroactive fund fits.

Please let me know and thanks in advance!

[neroone]

hi @noun22 and NSFW team, just checking if the idea works or is feasible. could you get back on this, please? thanks

[maty]

Hey @neroone, in the past NSFW has at most helped out with deployment costs for nounish extensions. Its quite an interesting project youre working on but i dont see what the benefit is for NounsDAO?

[neroone]

Thanks, maty for the reply. As I mentioned in the objective, it is to encourage nouns builder/new nouns fork to experiment more with interactive NFT and I’m working on making it open source. I want a different type of NFT to be part of the ecosystem and would love it if we’re not stuck at the same PFP/static image type of NFT.

At least we can see more innovation coming from future nounish forks. That’s all I wanted and with this, I thought I could contribute to it.

If the community thinks this proposal doesn’t fit in the nouns ecosystem, I would love it if NFSW could help me with the deployment cost. The project was meant to be given/minted for free for people to play around with.

But looking at the current situation, if this proposal does not go well, I’d just let people mint it out for cheap, at least to cover my development cost for this project.