前置きおはようございます。Calandarの季節がやってまいりました。去年に引き続き今年もp5.jsを使ってクソアプリを作成していきます。Calandar2018のトップバッターということで、気合を入れて社会に一石を投じるようなクソアプリを作ろうと思い、製作したものが以下のWebアプリです。社会に一石を投じるアプリ一石を投じられたと思います。画面描画のコツ画面サイズ変更イベントの追加ベジェ曲線で投石の軌道算出ツイートボタン生成Parcelを導入する今回はParcelというモジュールバンドラを導入してみました。面倒な設定なしでJavaScriptのコードをビルド(トランスパイル、minifyなど)してくれます。npmでparcel-bundlerをインストールし、package.jsonを作成すればとりあえず準備完了です。導入には以下の記事を参考にさせていただきました。~Parcelはwebpackの代わりになるのか~p5.jsを導入するParcelを導入できたところで、p5.jsをインストールします。ターミナルで以下のコマンドを実行しましょう。p5これでp5.js(あとp5.sound.js)がインストールされます。p5.jsを使ってみる使える機能は公式のリファレンスを見ると大体わかりますが、Parcelでビルドする場合は実装方法が若干変わります。index.htmlからapp.jsを参照するものとして、app.jsをこんな風に実装します。P5で実行すれば良い感じですね。つけてやれば良いです。実装の小ネタ以下、アプリ実装時にハマったところをまとめていきます。画面をクリックしたときのイベントはp5のmouseClickedやtouchStartedに定義しておきます。PC(GoogleChrome)、Android(GoogleChrome)、iOS(Safari)で実行したときにそれぞれイベントの発火タイミングが異なるので注意が必要です。(例えば、mouseClickedだけを使うとSafariで実行したときにイベントが発火しなかったり)今回はこんな感じに実装しています。}Androidの場合もtouchStartedで良いのでは?と思ったのですが、そうすると画面をタップした瞬間と画面から指を離した瞬間で2回イベントが発火してしまったので、このように。...)ありますが、描画処理を呼ぶ回数が多くなったりするとパフォーマンスに影響が出る事があります。それを防ぐために、一旦描画したいものを全て別のオブジェクトに出力しておき、最後にそのオブジェクトだけをcanvasに出力する、という手法をとっています。このように、bufferedImageに描画したいものを全部出力しておいて、drawメソッドの最後に1度だけp.imageメソッドを呼ぶことでcanvasにアクセスする回数が1フレーム1回だけになり、パフォーマンスが若干向上します。画面サイズ変更イベントの追加アプリ起動時、ウィンドウサイズに合わせてcanvasを生成していますが、アプリ実行中に画面サイズが変わることもあると思います。そんな場合はwindowResizedイベントを発火させてcanvasを再構築しましょう。};ベジェ曲線で投石の軌道算出3点からなるベジェ曲線の、経過時間に対応する座標情報を算出する式は以下のとおりです。Websiteツイートボタン生成ツイートボタンを設置するだけであれば、以下のツイートボタン生成サイトで生成したコードをHTMLに書いておくだけでよいです。Publish今回のようにツイートメッセージを動的に変更したい場合、一工夫が必要です。}ややゴリ押しな方法っぽい気がしますが、要するにツイートボタンのDOMを書き換えてtwttr.widgets.load();してやるとツイートボタンが再構築されます。まとめ何か新しい技術を勉強するモチベーションを保つ方法として、クソアプリ開発はおすすめです。節分バージョンを作りました。家で豆を撒くのが面倒な時などにお使い下さい。