I’ve been looking into creating dynamic NFTs that generate unique artwork each time they run. I know some developers use base64 encoded SVG images in their contracts like this:
function generateImageData() {
string memory svgData = "data:image/svg+xml;base64,BASE64_ENCODED_CONTENT_HERE"
}
But I want to create something more interesting. My p5.js sketch creates different variations every time it executes, which is perfect for generative art. The problem is I’m not sure how to store the actual JavaScript code on the blockchain instead of just a static image.
Is it possible to embed the p5.js script directly into the smart contract and pass a unique seed value to it? This way each NFT would have the same base code but generate different visual outputs based on its specific seed. I’m trying to figure out the best approach to make this work with standard NFT metadata formats.
yeah, i’ve tried this before! you can encode the p5 code as base64-html in the contract. just put your sketch inside a simple html template with the p5 cdn link. works great on marketplaces since they decode and show it like any other nft image.
Oh this is fascinating! I’ve been messing around with similar stuff lately and you’re totally on the right track with seed-based generation.
Here’s what I’m curious about - how are you handling the execution environment? When someone views the NFT on OpenSea or wherever, how does the p5.js code actually run? Are you thinking the metadata points to an HTML file that loads p5.js and runs your script, or something more integrated?
The seed approach is brilliant because it’s true on-chain generative art instead of just storing pre-rendered stuff. But I’m wondering about gas costs - storing JavaScript as strings in your contract could get expensive depending on how complex your p5 sketch is. Have you estimated deployment costs?
Also, what’s your p5 script doing? Geometric/algorithmic art or something with more complex rendering? That might affect how you structure everything. Some approaches work better for simple generative algorithms, others for complex visual stuff.
Really want to see where you take this - generative art + blockchain is still such unexplored territory!
Built something like this last year and hit a few technical snags you should know about. Store your p5.js code as a string in the contract, then concat it with HTML boilerplate that includes the p5 library and your seed parameter. I stored the main generative algorithm on-chain and used keccak256(tokenId) for deterministic seeds. Each token gets consistent artwork and everything stays truly on-chain. The annoying part? Making sure your p5 sketch works across different viewing contexts. Some marketplaces have strict CSP that’ll break JavaScript execution. Keep your p5 code minimal and skip external dependencies - that solved most issues for me. Gas costs get brutal with lengthy scripts. Store common functions once and reference them across tokens, or break complex sketches into modules. My 200-line generative script ran about 0.3 ETH to deploy during high gas, so plan your budget.