Processingのようなjavascript→P5.jsで遊んでみる。

その他Processing, javascript

どもども、Processingから早速浮気しまして、jsのライブラリP5.jsで遊んでみました。
というのも、前回の記事で、Webページ上で実行できるようにしたのですが、なんか挙動が微妙(たぶん自分の扱いがいけないんだと思いますが…)な部分があったので、ここらで、別の手法も試してみようと思ったしだいです。
というわけで、今回もHTMLに書き込み、ブラウザで実行できるようにしようと思います。


1.入手
本来なら、DLして扱えばいいと思いますが、今回はめんどくさいので、CDNで済ませてしまいます。
ので、p5.jsを実行したいHTMLを用意したら、そこに以下のコードを追加してください。

実際に書いてみる
では、実際にコードを書いていきましょう。コードは、上記のライブラリリンクの下にscriptタグを追加して書いていきます。どのように書けばいいのかは、リファレンスを確認してほしいのですが、この記事を書いている現在、なぜかリファレンスのページが表示されないという状況です…。基本的には、Processingの記述とたいして変わらないようなので、今回自分はProcessingのほうを参考に書いています(´Д⊂ヽ
実際に書いてみると以下のようになります。

今回、P5Canvasというidを振ったdivタグにスクリプトの内容を表示しています。ちなみに、HTML上部に記述されているCSSは、P5実行時に生成されるCanvasをブラウザの画面いっぱいに表示するための記述になるため、P5への直接的な影響はありません。

3.動作確認
上記までで、書いてきたファイルをブラウザで確認すると、「hogeがちかちかしながら、マウスの位置に大量発生」てな感じで動作しますので確認してみてください。


「p5.js」(公式ページ)
http://p5js.org/
「p5.jsでProcessingのようにリッチなWeb表現を作るチュートリアル」
http://liginc.co.jp/…/130834