如何导出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 或计算机上的屏幕录制软件。
基本上我用 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 或计算机上的屏幕录制软件。