CODEWITHSUNDEEP
animationcanvasp5.jsnft
Andrea Goldoni
Andrea Goldoni

Reputation: 45

How to export a p5js animation to upload it as a NFT?

Basically I created this animation with p5js and I wanted to figure out how I can export it to upload it as an NFT. Since it's an animation that keeps changing the export can't be jpg, gif or mp4 type. But it has to be of another type. I've heard of SVGs but I'm not sure if they could be the solution to the problem.

That's the javascript file in p5js:

var msEndMvm = 0;
var delayMvm = 10;
var x = 0;
var flag = true; //true is right false left
// Create a new canvas to the browser size
function setup() {
  createCanvas(400, 400, SVG);
  background('#FFFFFF');
  strokeJoin(MITER);
  strokeWeight(random(1, 5));
  rectMode(CENTER);
}

// On window resize, update the canvas size
function windowResized() {
  resizeCanvas(400, 400);
}

// Render loop that draws shapes with p5
function draw() {
  if (millis() >= msEndMvm) {
    background('#FFFFFF');
    rect(x, 200, 20, 10);
    msEndMvm = millis() + delayMvm;
    if (flag) {
      x++;
      if (x >= 400) {
        flag = false;
      }
    } else {
      x--;
      if (x <= 0) {
        flag = true;
        console.log(millis());
      }
    }
  }
}
canvas {
  padding: 0;
  margin: auto;
  display: block;
  width: 800px;
  height: 600px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

body {
  margin: 0;
  padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://unpkg.com/[email protected]"></script>

Upvotes: 0

Views: 1551

Answers (1)

Paul Wheeler
Paul Wheeler

Reputation: 20180

An NFT can be based on any digital file type, but only certain file types can encode animations. Technically SVG does support animation and most modern web browsers support it, however p5js-svg doesn't appear to have any support for this, which makes sense because p5.js frames are drawn one by one, not with persistent objects (i.e. when you animate a rectangle moving across the screen you clear the screen and draw a new rectangle for each frame, as opposed to updating the position of the existing rectangle).

If you want to generate an animation or video file from p5.js you can use saveFrames() (for very short animations), a library such as ccapture.js, or screen recording software on your computer.

Upvotes: 1

Related Questions