Converting p5.js animated sketch to NFT-compatible format

NFT
1

I made this cool animated sketch using p5.js and now I want to turn it into an NFT. The problem is that my animation runs continuously and keeps changing, so I can’t just save it as a regular image file like JPG or PNG. I also can’t use MP4 or GIF because those don’t work well for NFTs that need to be interactive or generative. I’m thinking maybe there’s a way to export the actual code or use some other format that preserves the animation logic. Has anyone done this before?

Here’s my p5.js code:

var timeCounter = 0;
var moveDelay = 15;
var yPosition = 0;
var direction = 1; // 1 for down, -1 for up

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

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

function draw() {
  if (millis() >= timeCounter) {
    background(220);
    ellipse(250, yPosition, 30, 30);
    timeCounter = millis() + moveDelay;
    
    if (direction === 1) {
      yPosition += 2;
      if (yPosition >= 500) {
        direction = -1;
      }
    } else {
      yPosition -= 2;
      if (yPosition <= 0) {
        direction = 1;
      }
    }
  }
}

What’s the best way to export this so I can mint it as an NFT?

2

Most NFT platforms that support generative art will accept your p5.js code formatted as an HTML file. Bundle your entire project into a single HTML document that includes the p5.js library and your sketch code. I have successfully done this on Art Blocks and fxhash. However, ensure that your code is deterministic; currently, the random strokeWeight in the setup function causes variations in your animation. To achieve true generative art, seed your randomness with the platform’s hash. If the platform does not support live code, consider rendering your work as a high-quality MP4 loop. Many collectors prefer this format since it is widely playable, and interactivity does not always drive NFT value.

3

drop ur sketch into a basic HTML file with the p5.js library. fxhash and similar platforms handle this just fine. fix that random strokeWeight issue tho - it’ll make ur art look different every time, which could cause problems.

4

This is pretty interesting! I’ve been experimenting with generative NFTs myself lately and I’m curious about your approach. What made you choose p5.js over three.js or processing?

Regarding your question - you’re on the right track thinking about preserving the animation logic rather than converting to static formats. Have you looked into platforms like async.art or foundation? Some of them have pretty good support for live coding projects.

One thing I’m wondering about - are you planning to make this truly generative where each token would be unique, or do you want every NFT to show the exact same bouncing ball animation? If it’s the latter, you might actually be better off with a clean mp4 loop despite what you mentioned about interactivity.

Also just noticed something in your code - you’re using millis() for timing but what happens if someone views your NFT on a really slow device? Might want to consider using frameCount instead for more consistent behavior across different systems.

What’s your experience been like with the whole NFT minting process so far? And which blockchain are you thinking of using?