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

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

0 голосов
/ 11 ноября 2018

Я работаю над генеративным искусством, используя 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();
}

1 Ответ

0 голосов
/ 11 ноября 2018

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

Или вы можете использовать одну из save*() функций в ссылку . Функцию save() или функции saveCanvas() было бы хорошим началом. Функция saveFrames() может сохранять короткие анимации.

Или вы можете использовать библиотеку, например ccapture.js , или инструмент, подобный ScreenToGif , если хотите сохранить анимированный файл.

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

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

...