Загрузить изображение, сгенерированное из функции, на холсте p5.js - PullRequest
Новая
       21

Загрузить изображение, сгенерированное из функции, на холсте p5.js

0 голосов
/ 03 июля 2018

Я пытаюсь загрузить изображение, которое возвращается как результат функции в библиотеке gaborgen.js

Идея заключается в том, что я смогу сгенерировать изображение патча Gabor с помощью этой библиотеки, а затем мне нужно сохранить его в переменной изображения в p5 и отобразить на холсте.

Способ работы библиотеки состоит в том, что она имеет функцию gaborgen (), которая принимает два параметра, поэтому gaborgen (50,50) возвращает патч Gabor с этими атрибутами. Библиотека работает так, что возвращает изображение в формате PNG base64.

Я попытался загрузить изображение следующим образом, но это не удалось. Полученный эскиз - просто пустой экран. 

var img;

function setup() {
 createCanvas(640, 360);
 img = createImg(gaborgen(50,40));

}

function draw(){
 background(0);
 image(img, 0, 0, img.elt.width, img.elt.height);
}

Функция gaborgen () в библиотеке Gaborgen.js выглядит следующим образом: 

gaborgen = function(tilt, sf) {
  var a, aspectratio, b, contrast, gab_x, gab_y, gridArray, i, j, m, multConst, phase, preSinWave, ref, reso, sc, scaledM, sf_max, sf_min, sinWave, tilt_max, tilt_min, varScale, x, x_centered, x_factor, y, y_centered, y_factor;
  if ((tilt > 100 || tilt < 1) || (sf > 100 || sf < 1)) {
    console.log("ERROR: gaborgen arguenment input out of bounds");
  }
  reso = 400;
  phase = 0;
  sc = 50.0;
  contrast = 100.0;
  aspectratio = 1.0;
  tilt_min = 0;
  tilt_max = 90;
  sf_min = .01;
  sf_max = .1;
  tilt = rescale_core(tilt, tilt_min, tilt_max, 1, 100);
  sf = rescale_core(sf, sf_min, sf_max, 1, 100);
  x = reso / 2;
  y = reso / 2;
  a = numeric.cos([deg2rad(tilt)]) * sf * 360;
  b = numeric.sin([deg2rad(tilt)]) * sf * 360;
  multConst = 1 / (numeric.sqrt([2 * pi]) * sc);
  varScale = 2 * numeric.pow([sc], 2);
  gridArray = numeric.linspace(0, reso);
  ref = meshgrid(gridArray), gab_x = ref[0], gab_y = ref[1];
  x_centered = numeric.sub(gab_x, x);
  y_centered = numeric.sub(gab_y, y);
  x_factor = numeric.mul(numeric.pow(x_centered, 2), -1);
  y_factor = numeric.mul(numeric.pow(y_centered, 2), -1);
  preSinWave = numeric.add(numeric.add(numeric.mul(a, x_centered), numeric.mul(b, y_centered)), phase);
  i = 0;
  while (i < reso) {
    j = 0;
    while (j < reso) {
      preSinWave[i][j] = deg2rad(preSinWave[i][j]);
      j += 1;
    }
    i += 1;
  }
  sinWave = numeric.sin(preSinWave);
  m = numeric.add(.5, numeric.mul(contrast, numeric.transpose(numeric.mul(numeric.mul(multConst, numeric.exp(numeric.add(numeric.div(x_factor, varScale), numeric.div(y_factor, varScale)))), sinWave))));
  scaledM = rescale(m, 0, 254);
  return numeric.imageURL([scaledM, scaledM, scaledM]);
};

Любая идея, как я могу загрузить PNG base64, возвращенный функцией в p5.js, как это?

1 Ответ

0 голосов
/ 03 июля 2018

Вы можете использовать изображение в кодировке base-64 непосредственно в P5.js, передав строку непосредственно в функцию loadImage(). Вот пример: 

var img;

function setup() {
  createCanvas(400, 400);
  img = loadImage('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
}

function draw() {
  background(220);
    image(img, 0, 0, width, height);
}

Обратите внимание на data:image/png;base64, часть аргумента.

Я не знаю, что возвращает функция gaborgen(), так что вам нужно будет выполнить некоторую отладку , чтобы точно определить, где ваш код ломается. Продвигайтесь вперед небольшими шагами и проверьте средства разработчика на наличие ошибок.

...