![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
至急です!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()
})
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
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
- 回答日時:
こんにちは
P5jsはまったく知らないのですが、概要を見たところ、「canvas利用でdraw内の関数が(多分)一定のフレームレートで繰り返して呼ばれる」という仕組みかと理解しました。
(違っている場合は、以下は無視してください)
ご提示のスクリプトは、省略だらけなのでサッパリわかりませんが、クリックされたらdraw内でimg2を描かなきゃいいんでないの?
https://p5js.org/reference/#/p5/mouseIsPressed
「一度でもクリックされたら以降は表示しない」というパターンなら、フラグでも設定しておいて、クリックでセット、セットされていたら描画しない、というロジックにしておけばよさそう。
あるいは、荒業として、クリックされたらimg2を透明画像に入替えちゃうとかでもよいかも…(笑)
この方法なら、P5jsとは無関係にバインドしておいても反映されるのではないかと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
透過pngの透明部分以外をクリッ...
-
重なった画像にクリックイベン...
-
Javascript で共通の処理をどこ...
-
JAVASCRIPTでアクセス毎に画像...
-
1枚の画像をクリックすると複数...
-
textareaに画像を表示したい
-
ボタンをクリックした時に、キ...
-
リロード毎に表示画像を変える
-
リロードさせるには?
-
画像と説明文を別データで作りたい
-
MAX関数を使ってからLEFT JOIN...
-
jquery ドロップダウンメニュー...
-
javascript ループがうごかない
-
チェックボックスに入っている...
-
指定したパスが現URLに含まれて...
-
jqueryのsortableで一部ソート...
-
JavaScriptで変更した属性の元...
-
yahooジオシティーズでのCSS読...
-
Gif画像のアニメーションが再生...
-
読み込んだQRコードをフォーム...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
透過pngの透明部分以外をクリッ...
-
JavaScript スライドの画像にリ...
-
1枚の画像をクリックすると複数...
-
Javascriptで指定した日付と時...
-
1枚の画像をクリックして複数の...
-
ボタンをクリックした時に、キ...
-
画像の重なりの順序を代える方...
-
【java】背景画像を一定時間で...
-
オンマウスで、画像切り替え+...
-
javascriptで毎月替わる画像
-
画像がプルプルふるえるんです。
-
jQueryスライドショー画像への...
-
HTMLで条件分岐はできますか?
-
JavaScriptとチェックボックス...
-
WEBページ立ち上げ時に1回のみ...
-
中心を軸にくるくる回るjQuery ...
-
プルダウンの位置がwin/macでず...
-
bxsliderにて読み込み後に内容...
おすすめ情報
回答ありがとうございます。
おそらくmousepressedとか使うんですよね…?
透明画像と入れ替えたいのですがそのやり方がさっぱり分からなくて…
何度も質問して申し訳ないのですが、教えてもらえるとありがたいです。