p5jsについて

至急です！p5jsでクリックするとimg2の画像が消えるような動作を行いたいのですが、どのように書いたらいいのかわかりません。 回答よろしくお願いします。(下記一部端折ってます。)

let fish = [];
let N = 10;
let img;
let img2;

function preload() {
img = loadImage("")
img2 = loadImage("")
}


function setup() {
createCanvas(500, 500);

for (let i = 0; i < N; i++) {
fish[i] = new Fish(random(width), random(height))
}

// バブルを生成
for (let i = 0; i < NUM_OF_BUBBLES; i++) {
bubbles.push(new Bubble());
}
}

function draw() {
background(0);

image(img, 0, 0, 500, 500);
image(img2, 320, 100, 50, 50);
image(img2, 250, 400, 50, 50);
image(img2, 400, 300, 50, 50);
image(img2, 100, 200, 50, 50);
image(img2, 50, 450, 50, 50);
image(img2, 50, 50, 50, 50);
fish.forEach(f => {
f.update()
f.display()
})

質問者からの補足コメント

• 回答ありがとうございます。
  おそらくmousepressedとか使うんですよね…？
  透明画像と入れ替えたいのですがそのやり方がさっぱり分からなくて…
  何度も質問して申し訳ないのですが、教えてもらえるとありがたいです。

  No.1の回答に寄せられた補足コメントです。 補足日時：2021/01/19 17:09

No.2 回答者： fujillin 回答日時： 2021/01/19 17:35

No1です。

No1にも書きましたように、P5jsに関しては何も知りません。利用なさっている質問者様の方が詳しいはずです。

＞おそらくmousepressedとか使うんですよね…？
No1にリンクを張っといたのですが…？？
雰囲気的に mouseIsPressed ではないかと。


＞透明画像と入れ替えたいのですがそのやり方がさっぱり分からなくて…
変数img2の内容がわからないのですが、もしも画像要素（=DOM Element）であるならば
　img2.src = '新しいURL'
で置き替わると思います。
画像の読込みに時間がかかる可能性があるのなら、先にimg3とでもして読み込んでおいて、
　img2.src = img3.src
とすれば、タイムラグはでなくなると思います。

img2が直接の画像要素ではない場合は、そのプロパティなどから画像要素の実態を取得可能なはずと思いますので、そちらで上記の処理を行えば宜しいでしょう。


P5jsと関係なく実装してしまう方法をとるなら、こんな感じ
document.querySelector('canvas').addEventListener('click', e=>{
img2.src = '新しいURL'; //← img2の内容がわからないので曖昧です
});

No.1 回答者： fujillin 回答日時： 2021/01/19 12:51

こんにちは

P5jsはまったく知らないのですが、概要を見たところ、「canvas利用でdraw内の関数が（多分）一定のフレームレートで繰り返して呼ばれる」という仕組みかと理解しました。
（違っている場合は、以下は無視してください）

ご提示のスクリプトは、省略だらけなのでサッパリわかりませんが、クリックされたらdraw内でimg2を描かなきゃいいんでないの？
https://p5js.org/reference/#/p5/mouseIsPressed

「一度でもクリックされたら以降は表示しない」というパターンなら、フラグでも設定しておいて、クリックでセット、セットされていたら描画しない、というロジックにしておけばよさそう。

あるいは、荒業として、クリックされたらimg2を透明画像に入替えちゃうとかでもよいかも…（笑）
この方法なら、P5jsとは無関係にバインドしておいても反映されるのではないかと思います。