Integrating dynamic p5.js sketches into NFT creation

Hey everyone! I’m trying to figure out how to use p5.js for making NFTs that change each time they’re viewed. I’ve seen people use SVG-based methods, but that’s not what I’m after. My p5.js sketch generates slightly different results each time it runs.

I’m wondering if there’s a way to store the entire p5.js script on-chain and just pass a seed to it. This way, the NFT would be dynamic but still deterministic based on the seed. Has anyone done something like this before? Any tips or ideas would be super helpful!

Here’s a basic example of what I’m thinking:

function generateNFT(seed) {
  randomSeed(seed);
  
  createCanvas(400, 400);
  background(220);
  
  for (let i = 0; i < 10; i++) {
    fill(random(255), random(255), random(255));
    ellipse(random(width), random(height), 50, 50);
  }
}

But how do I actually implement this in a smart contract? Any guidance would be awesome!

yo, this sounds pretty dope! :fire: have u looked into using oracles? they could fetch random seeds from off-chain sources, keeping things unpredictable but still verifiable. might solve ur deterministic issue.

also, what about rendering the sketch off-chain and just storing the final image hash on-chain? could save some major gas $$$. just throwin ideas out there, lmk wat u think!

hey singingsnow, that’s a super cool idea! i’ve been playing around with p5.js too and love how it can create unique art each time. :art::sparkles:

have you thought about using a service like fleek or pinata to host your p5.js script? you could upload it there and then just store the ipfs hash in your smart contract. that way, you’re not paying crazy gas fees to store the whole script on-chain.

for the seed part, maybe you could use the block number or timestamp when the nft is minted? that’d give you a unique but deterministic seed for each one.

btw, have you checked out art blocks? they do something similar with on-chain generative art. might be worth looking at for inspiration!

what kind of art are you thinking of making with this setup? i’d love to hear more about your ideas!

Integrating dynamic p5.js sketches into NFTs is an intriguing concept. While storing the entire script on-chain might be prohibitively expensive due to gas costs, you could consider a hybrid approach. Store a minimal version of your p5.js script on IPFS and reference it in your smart contract, which then stores and passes the seed value.

Another possibility is to have the NFT viewer’s browser execute the p5.js script client-side, fetching the seed from the smart contract. This method requires JavaScript integration with Web3 libraries to interact with the blockchain. Testing for consistency across platforms and browsers is essential to ensure reliable rendering.