この記事はクソアプリ2 Advent Calendar 2019 - Qiitaの21日目の記事です。
色鮮やかなうんち達💩💩💩が、マウスを追っかけてくるクローム拡張機能を作りました。ブラウザをクリックすると、うんちが増えていきます。
１つのうんち💩をじっくり観察するGIF
クローム拡張機能として、リリースしています🎉
こちらから、ぜひDLしてみて下さい！
→うんちマウスストーカー - Chrome ウェブストア
ソースはこちらにあります。
→gurutaka/extension_kuso_mouse_stalker
ここでは、うんちマウスストーカーの特徴と技術的な話を紹介していきます。
うんちマウスストーカーの特徴
- うんちはp5js製で手作り
- うんちの先端が絶妙に左右に動く
- 全く役に立たない
技術的な話
クローム拡張機能の作り方
過去に初学者向けにQiitaにまとめています！クローム拡張機能の開発にご興味持った方は、ぜひ参考にしてみてください。
→Chromeブラウザの拡張機能を作ってみたい初心者向けに開発方法を紹介！【サンプルあり】
またGithuｂに簡単なサンプルもおいてあるので、こちらもお試しください！
→gurutaka/extensions_hundsOn
ブラウザ上でうんちが動く仕組み
こちらの資料にまとめているので、気になる方はぜひご覧ください。
簡単に概要はこちら
- div要素をブラウザに配置
- setupで画面全体にcanvasを配置
- あとはうんちがマウスを追っかけるプログラムを書けばOK！
うんちの描画
うんちはp5js(processingをJavaScriptに移植したライブラリ)で書きました。うんちの先端は三角関数で動いてます。
うんちの物理運動
うんちがマウスに到達するまでの動きは、物理運動に従っています。
操舵力を計算して、マウスを追っかけるようにしました。
下図はイメージ図です！
しかし、このままの実装だと、うんちがマウス付近まで全力で向かってくるので、急ブレーキできず、マウス付近で止まりません。なので、ある一定範囲内に近づくと、ブレーキをかけるようにしています。
最後に
以上になります。昨年に引き続き、今年も全く役に立たないクソアプリができて満足です。
→おっぱい関数ジェネレーターを作ってみた【初リリース】
来年はさらなるクソアプリができるよう、精進して参ります。