What's the best way to convert p5js interactive art into NFT format?

NFT
1

I built this cool interactive artwork using p5js and now I want to mint it as an NFT. The problem is that my animation keeps running and changing continuously, so I can’t just save it as a regular image file like PNG or JPEG. I also tried MP4 but that doesn’t seem right for this type of generative art.

I’m wondering what file format would work best for this kind of dynamic content. Someone mentioned that HTML files might work, or maybe there’s a way to package the whole thing differently?

Here’s my p5js code:

var timeStamp = 0;
var moveDelay = 15;
var position = 0;
var direction = true; // true moves right, false moves left

function setup() {
  createCanvas(500, 500);
  background(255);
  stroke(0);
  strokeWeight(random(2, 6));
  rectMode(CENTER);
}

function windowResized() {
  resizeCanvas(500, 500);
}

function draw() {
  if (millis() >= timeStamp) {
    background(255);
    rect(position, 250, 30, 15);
    timeStamp = millis() + moveDelay;
    
    if (direction) {
      position += 2;
      if (position >= 500) {
        direction = false;
      }
    } else {
      position -= 2;
      if (position <= 0) {
        direction = true;
      }
    }
  }
}

What would be the proper approach to get this ready for NFT marketplaces?

2

honestly, just convert to mp4 or gif for opensea/rarible. yeah, you lose the interactivity, but most buyers don’t care anyway. record 30-60 seconds of your animation and loop it. if you really want interactivity, async art supports html/js but their marketplace is kinda dead now. foundation might still take zipped html files but idk if they do that.

3

Great question! I’ve been messing around with generative art and hit the same roadblocks with NFTs.

Most NFT platforms suck for interactive stuff - they’re built for static images and basic videos. But fxhash and artblocks are different. They actually support generative/interactive pieces.

Checked those out yet? You can upload the actual JavaScript code instead of converting to static files. Each time someone views or mints your NFT, it generates a unique variation from your code.

Another option: make it “deterministic” using seed values. Instead of continuously changing, each NFT gets its own seed that creates a specific version of your animation. Might be more valuable since each one’s truly unique.

Which marketplace are you targeting? Would you be cool with each NFT being a unique generated instance instead of the continuously changing version?

Also - does your animation have user interaction or is it purely time-based like your code?

4

I did this exact thing last year with my p5js work. Most NFT platforms weren’t built for interactive content, but you can make it work. For your code, I’d make it deterministic - replace the time-based animation with a hash-based seed system. Each NFT gets a unique but fixed state instead of continuously animating. Use the token ID or wallet address as your seed input. Bundle your p5js code with all dependencies into one HTML file. Include p5.min.js locally - don’t link to CDNs since some platforms block external requests. Test in different browsers before you mint. SuperRare sometimes accepts HTML uploads if you apply and get in. But honestly, Tezos platforms like fx(hash) are your best bet. They’re built for generative art and the community actually gets interactive pieces. Your animation’s simple enough that it’ll work great with a seed-based approach while keeping the core visual concept.