p5.playをやる記事#06_マウスに反応させる

11062 ワード

p5.js JavaScript p5.play 初学者向け JavaScript テキストリンク

前回の記事 | 次回の記事

p5.playの使い方を解説しております。
第1回の記事はこちらにありますのでご参照ください。

マウスに反応させる

今回はマウスの動きや動作に合わせてスプライトを操作するお話です。
スプライトにはあらかじめその機能もしっかり備わっています。
(ありがたや!!)

マウスに関するイベントとしてよく使う機能は下記の通りです。

マウスが重なった時
マウスが離れた時
マウスでクリック(押した)時
マウスでクリック(離した)時

以下、順番に見ていきましょう。

マウスが重なった時

マウスがスプライトに重なった時に何かを実行したい場合は、
onMouseOverに関数を定義します。

スプライト.onMouseOver = (event)=>{
   // やりたい処理
}

マウスが離れた時

マウスがスプライトにから離れた時に何かを実行したい場合は、
onMouseOutに関数を定義します。
関数にある"event"引数には、対象のスプライト自身を示すオブジェクトが格納されています。

スプライト.onMouseOut = (event)=>{
   // やりたい処理
}

マウスでクリック(押した)時

マウスでスプライトをクリック(押した)時に何かを実行したい場合は、
onMousePressedに関数を定義します。
関数にある"event"引数には、対象のスプライト自身を示すオブジェクトが格納されています。

スプライト.onMousePressed = (event)=>{
   // やりたい処理
}

マウスでクリック(離した)時

マウスでスプライトをクリック(離した)時に何かを実行したい場合は、
onMouseReleasedに関数を定義します。
関数にある"event"引数には、対象のスプライト自身を示すオブジェクトが格納されています。

スプライト.onMouseReleased = (event)=>{
   // やりたい処理
}

サンプルを作ってみる

実際にonMouseOver、onMouseOutを使ってサンプルを作ってみましょう。

使っているタヌキの画像を置いておきますね。

大きさが変わるサンプル

次のコードは、マウスが重なった時は大きくなり、
離れた時に元の大きさに戻るサンプルです。

let img;

function preload() {
    img = loadImage("t_tanu.png");
}

function setup() {
    createCanvas(windowWidth, windowHeight);
    frameRate(32);
    noSmooth();
    // スプライト
    let spr = createSprite(width/2, height/2);
    spr.addImage(img);
    // マウスが重なった時
    spr.onMouseOver = (event)=>{
        event.scale = 2;// 2倍の大きさになります
    }
    // マウスが離れた時
    spr.onMouseOut = (event)=>{
        event.scale = 1;// 元の大きさに戻ります
    }
}

function draw() {
    background(33);
    drawSprites();
}

マウスが重なると2倍になり、離れると元の大きさ(1倍)になります。(お見事!!)
余裕があったら、onMousePressedやonMouseReleasedも試してみましょう。

クリックするとどこかに行っちゃうサンプル

次のコードは、クリックするとどこかへ行ってしまうサンプルです。

let img;

function preload() {
    img = loadImage("t_tanu.png");
}

function setup() {
    createCanvas(windowWidth, windowHeight);
    frameRate(32);
    noSmooth();
    // スプライト
    let spr = createSprite(width/2, height/2);
    spr.addImage(img);
    // マウスでクリックした時(押した時)
    spr.onMousePressed = (event)=>{
        event.scale = 0.5;// 半分の大きさになります
    }
    // マウスでクリックした時(離した時)
    spr.onMouseReleased = (event)=>{
        event.scale = 1;// 元の大きさになります
        event.position.x = random(width);// ランダムで何処かへ!!
        event.position.y = random(height);
    }
}

function draw() {
    background(33);
    drawSprites();
}

絶対に捕まえることは出来ません!!
(座標がランダムで変わるだけですね)

次回も引き続き、スプライトについてのお話になります。