1

我正在使用 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();
}
4

1 回答 1

0

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

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

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

您也可以考虑简单地绘制一个没有动画的画布。硬编码您想要的值，然后使用实例模式显示多个静态草图。

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

于 2018-11-11T17:33:47.560 回答