在 p5.js 中使用 loadImage 的正确方法？

Question

我正在从 json 文件加载图像 URL。除了显示实际图像外，我一切正常。

这是一个简单的点击轮播。点击一下，它会将索引移动到下一个。我想确保图像同时显示，显然它不起作用（图像被引用，但不显示）。

有人知道我做错了什么吗？

var w = window.innerWidth;
var h = window.innerHeight;
var xPos = w/2;
var yPos = h/2;
var index = 0;
var imageData;
var imgList = [];
var indexMax;

function preload() {
  loadJSON("image_search_result.json", resultLoaded);
}

function resultLoaded(data) {
  imageData = data;
  indexMax = imageData.items.length;
  for (i = 0; i < indexMax; i++) {
    imgList.push(imageData.items[i]['link']);
  }
}

function mouseReleased() {
  index = index + 1;
  if (index == indexMax){
    index = index - indexMax;
  }
}

function setup() {
  createCanvas(w,h);
}

function draw() {
  background(0);
  image(loadImage(imgList[index]),xPos,yPos,w,h);
  text(index,20,60); // index counter
  text(imgList[index],80,60); // image list number
  textSize(20);
  fill(255);
}

Answer 1

我认为问题在于您在每次调用绘图函数时都试图上传图像。在您编写代码时，即使要上传的图像始终相同，p5.js 也会从头开始重新加载它们。您应该在启动程序之前加载它们。正如我在下面所做的那样：

var w = window.innerWidth;
var h = window.innerHeight;
var xPos = w / 2;
var yPos = h / 2;
var index = 0;
var imageData;
var imgList = [];
var indexMax;

function preload() {
  loadJSON("img.json", resultLoaded);
}

function resultLoaded(data) {
  imageData = data;
  indexMax = imageData.items.length;
  for (i = 0; i < indexMax; i++) {
    url = imageData.items[i]["link"];
    imgList.push(loadImage(url));
  }
}

function mouseReleased() {
  index = index + 1;
  if (index == indexMax) {
    index = index - indexMax;
  }
}

function setup() {
  createCanvas(w, h);
}

function draw() {
  background(0);

  image(imgList[index], xPos, yPos, w, h);

  text(index, 20, 60);
  textSize(20);
  fill(255);
}

P.S。 @George Profenza 在我编写代码时给出了相同的答案。抱歉

Answer 2

最后我通过在 loadImage 中添加一个回调来让它工作。我不知道你可以这样做（没有在任何文档中看到它被引用），但它工作得非常有效。

function draw() {
  nextImg = loadImage(imgList[index], imageLoaded);
  text(index,20,60); // index counter
  text(imgList[index],80,60); // image list number
  textSize(20);
  fill(255);
}

function imageLoaded() {
  background(0);
  image(nextImg,xPos,yPos,w,h);
  imageMode(CENTER);
}

在 p5.js 中使用 loadImage 的正确方法？

correct way to use loadImage in p5.js?

javascript

processing

asynchronous

p5.js