图像数组 p5.js

Question

我创建了一些嵌套数组来显示图像数组，有一点我做错了，它重复相同的图像而不是在每个循环中绘制一个新图像。

这是我的示例代码模拟我的问题

var images = [];

function preload() {
  for (var i = 0; i< 3; i++) {
    images[i] = loadImage("img/img" + i + ".jpg");
  }
}

function setup() {
  createCanvas(900, 900); 
  background(0);
  preload();
}

function draw() {
  //image(images[0],0,0);
  for ( var y= 0; y < height; y=y+300) {
    for ( var x =0; x < width; x=x+300) {
      for ( var z = 0; z < 3; z++) {
        image(images[z], x, y );
      }
    }
  }
}

作为图片，我只用了其中 3 个 300x300 的 jpg 来测试。

Answer 1

我可能错了，但快速阅读您的代码，您似乎在绘制 3 张图像：

image(images[z], x, y );

您可以在该行之前或之后添加 console.log(x,y); 以仔细检查。

总的来说，您正在做一个网格，您可能希望该网格的每个元素都是您预加载的图像，但您需要 space 稍微将它们取出：

image(images[z], x + images[z].width * z, y );

这很快而且很麻烦，但您实际上可以算出您需要多少间距：total width / (image width + image spacing) = spacing per image，假设加载的图像大小相同

另一种选择可能是循环浏览数组中的图像：

function draw() {
  var i = 0;
  //image(images[0],0,0);
  for ( var y= 0; y < height; y=y+300) {
    for ( var x =0; x < width; x=x+300) {
        //using % to loop back to the first element after the array length
        image(images[i % images.length], x, y );
        i++
    }
  }
}

请注意，上面的代码还没有经过测试，但希望它足够容易理解以适应

图像数组 p5.js

Image array p5.js

arrays

processing

p5.js