P5.JS:将生成艺术(使用noise())保存为设备上的图像，并在HTML上重新加载

Question

我正在使用p5.js和noise()函数研究生成艺术。我遵循了Daniel Shiffman的教程，但他的最终产品总是在不断的生成中，就像一部永恒的动画。

在我这边，我想把这些自动生成的画布作为图像保存在我的设备上。我想我的想法会有问题，因为这些形状是及时生成的，想要它们作为静止图像会否定它们的生成过程吗？

更准确地说：不计算我最终要工作的这个项目的数据库端(我的猜测是，程序应该首先创建这6个形状，并将它们保存为图像，然后再次上传到html页面上(，我希望html页面有6个不同的自动生成形状的图像。

我的代码：

var inc;

function setup() {
createCanvas(800, 800);
background(0);
noFill();
t = 0;
}
function draw() {
var r = 255 * noise(t+10);
var g = 255 * noise(t+15);
var b = 255 * noise(t+20);
stroke(r,g,b, 18);
strokeWeight(2);
fill(r,g,b,5);
var x1 = width * noise(t);
var x2 = width * noise(t+1);
var x3 = width * noise(t+2);
var x4 = width * noise(t+3);
var y1 = height * noise(t+4);
var y2 = height * noise(t+5);
var y3 = height * noise(t+6);
var y4 = height * noise(t+7);
quad(x1,y1,x2,y2,x3,y3,x4,y4);
t += 0.01;

//noLoop();
}

Answer 1

您只需右键单击画布，即可将当前显示的内容保存为图像。

或者，您可以使用参考中的save*()函数之一。save()函数或saveCanvas()函数将是一个很好的起点。saveFrames()功能可以保存短动画。

或者，如果你想存储动画文件，你可以考虑使用像ccapture.js这样的库或像ScreenToGif这样的工具。

您也可以考虑简单地绘制一幅未激活的画布。硬编码所需的值，然后使用实例模式显示多个静态草图。

采取哪种方法完全取决于您希望程序的行为方式。我建议你尝试几种不同的方法，看看你最喜欢哪一种。