如何导出p5.js动态动画并将其上传为NFT？

可行性结论 #

SVG完全可以满足你的导出需求，你也可以选择打包为单文件HTML，两种格式都支持作为NFT上传，且能完整保留动画的动态效果，无需转为jpg、gif、mp4这类固定时长或静态格式。

两种可选导出方案 #

• 方案1：单文件HTML导出（更简单，兼容性更好）
  你现有代码本身就是可运行的Web项目，只要把所有资源内联到同一个HTML文件里，去除外部依赖，就能生成独立可运行的NFT资产。现在主流NFT平台都支持HTML格式的生成类NFT，打开后可以直接运行你的动态动画，完整保留所有动态逻辑，没有帧率和时长限制。
• 方案2：动态SVG导出
  你已经引入了p5.js-svg库，只需要把动画逻辑内嵌到SVG的<script>标签中，最终输出的单个SVG文件就可以独立运行动画效果，同样支持作为NFT资产上传。

现有代码优化建议 #

你现在的代码已经可以直接打包使用，只需要注意两个小调整即可：

1. 把外部引入的p5.js和p5.js-svg的代码直接内联到HTML文件中，避免依赖外部资源，保证资产的独立性。
2. 可以把CSS中canvas的宽高设置和JS里的canvas尺寸统一，避免出现拉伸变形的问题。

提问者提供的原始代码 #

HTML代码 #

<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>

CSS代码 #

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;
}

JS代码 #

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());
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者Andrea Goldoni