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

作为图像，我只使用300x300 jpgs 3来测试。

Answer 1

我可能错了，但是快速阅读你的代码，它看起来你正在绘制3张图像：

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

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

总的来说，你正在做一个网格，你可能希望该网格的每个元素都是你预装的图像，但你需要将它们分开：

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

1 个答案: