Processingのようなjavascript→P5.jsで遊んでみる。
どもども、Processingから早速浮気しまして、jsのライブラリP5.jsで遊んでみました。
というのも、前回の記事で、Webページ上で実行できるようにしたのですが、なんか挙動が微妙(たぶん自分の扱いがいけないんだと思いますが…)な部分があったので、ここらで、別の手法も試してみようと思ったしだいです。
というわけで、今回もHTMLに書き込み、ブラウザで実行できるようにしようと思います。
1．入手
本来なら、DLして扱えばいいと思いますが、今回はめんどくさいので、CDNで済ませてしまいます。
ので、p5.jsを実行したいHTMLを用意したら、そこに以下のコードを追加してください。
|
1 |
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.11/p5.min.js"></script> |
実際に書いてみる
では、実際にコードを書いていきましょう。コードは、上記のライブラリリンクの下にscriptタグを追加して書いていきます。どのように書けばいいのかは、リファレンスを確認してほしいのですが、この記事を書いている現在、なぜかリファレンスのページが表示されないという状況です…。基本的には、Processingの記述とたいして変わらないようなので、今回自分はProcessingのほうを参考に書いています(´Д⊂ヽ
実際に書いてみると以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="http://fonts.googleapis.com/css?family=Walter+Turncoat&.css" rel="stylesheet"/> <style type="text/css"> body { margin: 0px; padding: 0px; } #defaultCanvas { width: 100%; height: 100%; position: fixed; display: block; } </style> </head> <body> <div id="P5Canvas"></div> <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.11/p5.min.js"></script> <script> var canvas; function setup() { canvas = createCanvas(windowWidth, windowHeight); canvas.parent("P5Canvas"); } function draw() { textSize(32); textAlign(CENTER); fill(random(255),random(255),random(255)) text('hoge',mouseX, mouseY); } </script> </body> </html> |
今回、P5Canvasというidを振ったdivタグにスクリプトの内容を表示しています。ちなみに、HTML上部に記述されているCSSは、P5実行時に生成されるCanvasをブラウザの画面いっぱいに表示するための記述になるため、P5への直接的な影響はありません。
3．動作確認
上記までで、書いてきたファイルをブラウザで確認すると、「hogeがちかちかしながら、マウスの位置に大量発生」てな感じで動作しますので確認してみてください。
「p5.js」(公式ページ)
「p5.jsでProcessingのようにリッチなWeb表現を作るチュートリアル」