読者です 読者をやめる 読者になる 読者になる

君たちは永遠にそいつらより若い

技術と音楽と日々のこと。

p5.js 入門(公式のGet startedを意訳しながらやってみた)

p5.js Web


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

p5.js とは

http://p5js.org/

オンブラウザで気軽に 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 版のみの提供で、WindowsLinux 版はもう少し経ってからリリースするそうです。

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>

描画する領域が 640x480 なので、その領域をはみ出ると描画されていません。

f:id:kuteken:20140807155927p:plain

チュートリアルが終わったら

この後は、以下の資料を見て、勉強して行きましょう!


以上、チュートリアルの抜粋&意訳でした。

うん!当たり前ですけど、思いきし、Processing でした!w

Processing への参入障壁が超下がって、いいっすね。p5.js を勉強したい場合、Processing の本を読むと良いと思います(でも、大体 Java で書いてあります)。

ジェネラティブ・アート -Processingによる実践ガイド

ジェネラティブ・アート -Processingによる実践ガイド

ビジュアライジング・データ ―Processingによる情報視覚化手法

ビジュアライジング・データ ―Processingによる情報視覚化手法

Processingをはじめよう (Make: PROJECTS)

Processingをはじめよう (Make: PROJECTS)

特に、ジェネラティブ・アートは超美しいので、ヴィジュアルブックとしてもオススメ。(今、検索したら追加で以下の記事が出てた。読もう。)

HTML5でのジェネラティブ・アート[Processing、JavaScript、チュートリアル] (『ジェネラティブ・アート』の未刊の章)

ばりばりアートっぽいことすると良いと思います。