마우스 오버 조치로 이미지 배열에서 특정 이미지 선택

Question

아래 img 배열에서 마우스 커서가있는 img를 어떻게 선택할 수 있습니까? 나는 이미지에 변화를 주거나, 예를 들어 숨기거나, 그것과 어떤 상호 작용을 할 수 있기를 원한다.

var images = []; 

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

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

function draw() { 
    var i = 0; 
    for (var y= 0; y < height; y=y+150) { 
    for (var x =0; x < width; x=x+150) { 
     image(images[i % images.length], x, y); 
     i++ 
    } 
    } 
} 

Answer 1

에 의해 위치로 건너 번 위치를 추가하여 해당 이미지의 인덱스를 찾을 당신이 다음 이미지를하는 아래 다음 mouseX과 쥐색의 위치를 ​​복용 계산 얼마나 많은 이미지를 통해 얼마나 많은 이미지와 얼마나 많은 시도 행에있는 이미지의 양. 예 :

var images = []; 
 
var selected; 
 

 
function preload() { 
 
    for (var i = 0; i< 18; i++) { 
 
    images[i] = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Google_Chrome_for_Android_Icon_2016.svg/150px-Google_Chrome_for_Android_Icon_2016.svg.png"); 
 
    } 
 
} 
 

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

 
function draw() { 
 
    var i = 0; 
 
    if (mouseX < width & mouseY < height) { 
 
     selected = Math.floor(mouseX/150) + Math.floor(mouseY/150) * Math.floor(height/150); 
 
    } else { 
 
     selected = -1; 
 
     // not found as out side of canvas 
 
    } 
 
    console.log("selected image: ", selected); 
 
    for (var y= 0; y < height; y=y+150) { 
 
    for (var x =0; x < width; x=x+150) { 
 
     image(images[i % images.length], x, y); 
 
     i++ 
 
    } 
 
    } 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.3/p5.min.js"></script>

콘솔을 확인하고 당신이 다음에 당신으로 해당 이미지를 변경하는 데 사용할 수있는 선택한 이미지를 인쇄 할 수 있습니다.