이미지 배열 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); 
     } 
    } 
    } 
} 

을 시뮬레이션이다, 난 그냥 테스트하기 위해 최대 300x300 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++ 
    } 
    } 
} 

위의 코드는 테스트하지 않았지만 적응하기에 충분히 이해할 수있을 것입니다.