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

您只需右键单击画布并将当前显示的图像保存为图像。

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

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

您还可以考虑简单地绘制一个没有动画的画布。硬编码所需的值，然后使用instance mode显示多个静态草图。

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

P5.JS：将生成的艺术作品（使用noise（））保存为设备上的图像，然后将其重新上传到HTML

1 个答案: