0

基本上我用 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>

4

1 回答 1

1

NFT 可以基于任何数字文件类型，但只有某些文件类型可以对动画进行编码。从技术上讲，SVG 确实支持动画并且大多数现代 Web 浏览器都支持它，但是p5js-svg似乎对此没有任何支持，这是有道理的，因为 p5.js 帧是一一绘制的，而不是使用持久对象（即当你动画一个在屏幕上移动的矩形，您清除屏幕并为每个帧绘制一个新矩形，而不是更新现有矩形的位置）。

如果您想从 p5.js 生成动画或视频文件，您可以使用saveFrames()（用于非常短的动画）、诸如ccapture.js 之类的库或计算机上的屏幕录制软件。

于 2021-09-07T21:57:16.170 回答