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

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

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

或者，如果您想存储动画文件，您可以考虑使用像 ccapture.js or a tool like ScreenToGif 这样的库。

您也可以考虑简单地绘制一个非动画 canvas。硬编码您想要的值，然后使用 instance mode 显示多个静态草图。

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

P5.JS：将生成艺术（使用 noise()）保存为设备上的图像并在 HTML 上重新上传它们

P5.JS: Saving generative art (using noise()) as images on device and reuploading them on HTML

canvas

noise

generative-art

perlin-noise

p5.js