円にマウスが乗ったら(マウスオーバー)—dist()関数を使って

「円にマウスオーバーしたら」という時の条件分岐は、このサンプルのように三平方の定理を使って2点間の距離を求め、それを円の半径と比較するのが基本原理です。ただし、どうしてもわからない、あるいは毎回このコードを書くのが面倒という人のために、便利なdist()関数というものがp5.jsには用意されています。dist()関数の引数には2つの点のx, y座標を順に渡してやります。実際には以下のようなコードで2点間の距離を取得することができます。

let d = dist(x, y, mouseX, mouseY);   //x, yとmouseX, mouseYの距離を求める

これを使った「円にマウスオーバーしたら」というif文の条件式は以下のようになります。

let d = dist(x, y, mouseX, mouseY);   //x, yとmouseX, mouseYの距離を求める
if(d < r){
   //マウスオーバー時の処理
}

ソースコード