イメージ配列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); 
     } 
    } 
    } 
} 

をシミュレートし、私はちょうどテストするためにそれらの300×300のJPG 3を使用。

Answer 1

私が間違っているかもしれませんが、すぐにあなたのコードを読んで、それはあなたが互いの上に3枚の画像を描画しているになります。あなたが前かダブルチェックにその行の後にconsole.log(x,y);を追加することができます

image(images[z], 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++ 
    } 
    } 
} 

上記のコードはテストされていませんが、うまくいければうまくいくと理解できます。