如何导出p5js动画上传为NFT?

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

基本上我用 p5js 创建了这个动画,我想弄清楚如何导出它以将其作为 NFT 上传。由于是不断变化的动画,导出不能是jpg、gif或mp4类型。但它必须是另一种类型。我听说过 SVG,但我不确定它们是否可以解决问题。

那是 p5js 中的 javascript 文件:

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/p5.js-svg@1.1.1"></script>

NFT 可以基于任何数字文件类型,但只有某些文件类型可以对动画进行编码。从技术上讲,SVG 确实支持 animation and most modern web browsers support it, however p5js-svg 似乎对此没有任何支持,这是有道理的,因为 p5.js 帧是一个接一个地绘制的,而不是使用持久对象(即当您为矩形移动时制作动画) screen 您清除屏幕并为每一帧绘制一个新矩形,而不是更新现有矩形的位置)。

如果您想从 p5.js 生成动画或视频文件,您可以使用 saveFrames() (for very short animations), a library such as ccapture.js 或计算机上的屏幕录制软件。