マウスオーバーで画像アレイから特定の画像を選択

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とmouseYの位置を取って計算するどのように多くの画像を越えて、どのように多くの画像とどのように多くのお試しください行内の画像の量。例：

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>

コンソールをチェックし、それはあなたが、その後で、あなたのようにそのイメージを変更するために使用することができ、選択した画像を印刷します。