p5.js でマウスストーカーを作る

アバター画像 sakurai

1

こんにちは。櫻井です。
この間マウスストーカーを作る機会があったのでその備忘録を兼ねてちょっと振り返りとこんなやり方もあったんだーっていうのを残したいと思います。

いつも通りに作る

自作した場合、やり方は色々あるとは思いますが基本的に
・マウスの座標を取得する
・マウスの動きに合わせて追従させたいものを動かす
って処理が必要になるはずです。

TweenMaxを使って作ったのがこちらです。

See the Pen mouseStalker by knap_develp (@knap_develp) on CodePen.

p5.jsを使って作る

最近少しp5.jsを勉強してるんですけどこの子あらかじめマウスの座標とかウィンドウの幅とか色々取得してくれていてマウスストーカーもっと簡単にできるんじゃない!?っと思ったんで先ほどのマウスストーカーと同じことを今度はp5.jsを使って作ってみます。

See the Pen p5 mouseStalker by knap_develp (@knap_develp) on CodePen.

p5.jsを使って作ってみて

実際に作ってる途中で気づいたんですけど、あんまり変わらないしむしろめんどくさくなってる。。 というのもeasingは自作するか追加でTweenMax読み込ませるかしないといけないですし、p5.jsのdraw関数は常に走っているので結構重くなります。
そもそもp5.jsってProcessingをjsで使うために作られたものなんだからこういうことには向かないですよね。

今回p5.jsでマウスストーカーを作ってみて、大した量書いてないように見えますが実は結構苦戦してました。
p5.jsにmouseOverというホバーした時に実行される関数があるんですがそれだとうまくいかなかったりmouseenterとmouseleaveのイベントを始めはsetup関数の方に入れていたんですがうまくいかなかったりしてました。
ただ苦戦した甲斐あってだいぶp5.jsの扱いには慣れたような気がします。
経験大事。

アバター画像

ぽちっとおうえん!

シェア

  • Facebook
  • LINE
  • X
ネットショップ開設サービスの違いを比較してみた 社員旅行2019