Question

我正在尝试将由于函数返回的图像加载到名为gaborgen.js的库中

我的想法是，我应该能够使用该库生成Gabor补丁图像，然后将其存储在p5中的图像变量中，并将其显示在画布上。

库的工作方式是它具有一个带有两个参数的gaborgen（）函数，因此gaborgen（50,50）将返回具有这些属性的Gabor补丁。该库的工作方式是将图像作为base64 PNG返回。

我尝试按以下方式加载图像，但失败。生成的草图只是一个空白屏幕。

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.js库中的gaborgen（）函数如下；

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]);
};

有什么主意如何将函数返回的base64 PNG加载到p5.js中？

Answer 1

通过将字符串直接传递到This server has low Hard Disk Space server2 This server has low Hard Disk Space server4 This server has low Hard Disk Space server3 This server has low Hard Disk Space server1 This server has low Hard Disk Space server4 on / This server has low Hard Disk Space server3 on / This server has low Hard Disk Space server2 on / This server has low Hard Disk Space server1 on / This server has low Hard Disk Space server2 on /boot This server has low Hard Disk Space server1 on /boot This server has low Hard Disk Space server4 on /boot This server has low Hard Disk Space server3 on /boot This server has low Hard Disk Space server2 on /home This server has low Hard Disk Space server3 on /home This server has low Hard Disk Space server4 on /home This server has low Hard Disk Space server1 on /home This server has low Hard Disk Space server4 on /opt This server has low Hard Disk Space server3 on /opt This server has low Hard Disk Space server2 on /opt This server has low Hard Disk Space server1 on /opt This server has low Hard Disk Space server2 on /scratch This server has low Hard Disk Space server4 on /scratch This server has low Hard Disk Space server1 on /scratch This server has low Hard Disk Space server3 on /scratch This server has low Hard Disk Space server1 on /tmp This server has low Hard Disk Space server4 on /tmp This server has low Hard Disk Space server2 on /tmp This server has low Hard Disk Space server3 on /tmp This server has low Hard Disk Space server4 on /usr This server has low Hard Disk Space server1 on /usr This server has low Hard Disk Space server3 on /usr This server has low Hard Disk Space server2 on /usr This server has low Hard Disk Space server2 on /usr/openv This server has low Hard Disk Space server4 on /usr/openv This server has low Hard Disk Space server1 on /usr/openv This server has low Hard Disk Space server3 on /usr/openv This server has low Hard Disk Space server1 on /var This server has low Hard Disk Space server2 on /var This server has low Hard Disk Space server4 on /var This server has low Hard Disk Space server3 on /var This server has low Hard Disk Space server4 on /var/log This server has low Hard Disk Space server2 on /var/log This server has low Hard Disk Space server1 on /var/log This server has low Hard Disk Space server3 on /var/log This server has low Hard Disk Space server1 on /app This server has low Hard Disk Space server3 on /app This server has low Hard Disk Space server2 on /app This server has low Hard Disk Space server4 on /app This server has low Hard Disk Space server1 on /atg_test1_xm This server has low Hard Disk Space server3 on /depotora This server has low Hard Disk Space server4 on /catalogfeed函数中，可以直接在P5.js中使用base-64编码的图像。这是一个示例：

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,函数会返回什么，因此您将需要执行一些debugging才能弄清楚代码在哪里崩溃了。 Work forward in smaller steps，然后检查您的developer tools是否存在错误。

加载从p5.js画布中的函数生成的图像

1 个答案: