フィードで流れてきたので、触ってみる。

p5.js とは

オンブラウザで気軽に Processing ライクにコードを書くための、JavaScriptのライブラリです。HTML5オブジェクト、ウェブカム、音声などにアクセスできるライブラリもあるらしいので、様々なインタラクティブコンテンツに応用が利きそうですね。

どんなことができるの？

この紹介ムービーページでざっと説明してくれています。（最後までつい見てしまうw）

http://hello.p5js.org/

demo よりも、examples の方が充実してて、見ていて楽しい。個人的には、 Simulate を見るとテンションが上がります。

http://p5js.org/learn/#examples

Get started をやってみる

公式の Get started を抜粋＆意訳しながら、ざっとやってみます。

http://p5js.org/get-started/

チュートリアルで最終的にできるもの

f:id:kuteken:20140807155927p:plain

ファイルダウンロードとセットアップ

ファイルをダウンロードして使う場合

ここからライブラリとサンプルファイルをダウンロード。

http://p5js.org/download/

解凍すると、中身はこんな感じ。

f:id:kuteken:20140807152545p:plain

自分の環境のパスに合わせて、p5.min.js を読み込めばOK。

<script src="../p5.min.js"></script>

CDN を使う場合

CDN から p5.js を読み込めばOKですが、0.0.0 を使いたいバージョンに合わせること、p5.min.js にすることを忘れずに。 ※2014/8/7 現在は、0.3.0が最新です。

<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.0.0/p5.js"></script>

↓

<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.0/p5.min.js"></script>

開発環境

f:id:kuteken:20140807155939p:plain

α版ですが、 p5.js editor という専用エディタがあります。2014/8/7 現在は、mac OS X 版のみの提供で、Windows と Linux 版はもう少し経ってからリリースするそうです。

Get started では、 Sublime Text 2 が使用されています。

初めての Sketch

円を描こう

インターネットに繋がっていれば、以下をこのまま書けば動くと思います。

<!DOCTYPE html>
<html>

  <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.0/p5.min.js"></script>
    <script>
      function setup() {
      }

      function draw() {
        ellipse(50, 50, 80, 80);
      }
    </script>
  </head>

  <body>
    <h1>Hello p5.js!</h1>
  </body>

</html>

Prossesing を触ったことがある方でしたら、見覚えがあると思いますが、

ellipse(50, 50, 80, 80)

は、中心を左上から (50, 50) の位置, 横幅と高さを (80, 80) で円を描け という命令です。

もし、エラーが起きて、うまく動かなければコンソールを見て、何かエラーが出ていないか確認しましょう。

もうちょっとエキサイティングな円を描こう

マウスが押されていたら黒い円、押されていなかったら白い円を描くサンプルです。

<!DOCTYPE html>
<html>

<head>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.0/p5.min.js"></script>
  <script>
    function setup() {
      createCanvas(640, 480);
    }

    function draw() {
      if (mouseIsPressed) {
        fill(0);
      } else {
        fill(255);
      }
      ellipse(mouseX, mouseY, 80, 80);
    }
  </script>
</head>

<body>
  <h1>Hello p5.js!</h1>
</body>

</html>