P5.JS: Сохранение генеративного искусства (с использованием шума ()) в качестве изображений на устройстве и повторная загрузка их в HTML

Question

Я работаю над генеративным искусством, используя p5.js и noise() функция. Я следовал за уроками Дэниела Шиффмана, но его конечный продукт всегда был в постоянном поколении, как вечная анимация.

С моей стороны, я хотел бы сохранить эти автоматически созданные холсты как изображения на моем устройстве. Я предполагаю, что в моей идее возникнут проблемы, потому что эти фигуры генерируются во времени, и желание их в качестве неподвижных изображений лишит их процесса генерации?

Чтобы быть более точным: не считая сторону базы данных этого проекта, над которой я в конечном итоге буду работать (я предполагаю, что программа должна сначала создать эти 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, если вы хотите сохранить анимированный файл.

Вы можете также рассмотреть возможность рисования неанимированного холста. Напечатайте нужные значения, а затем используйте режим экземпляра, чтобы отобразить несколько статических эскизов.

Какой подход вы выберете, полностью зависит от того, как вы хотите, чтобы ваша программа работала. Я бы порекомендовал попробовать несколько разных подходов и посмотреть, какой из них вам больше нравится.