Processing 環境の比較

このところ、花火シミュレートアプリ HANABICS (Chrome で見てね) というのを開発している (仕事じゃないよ)。

Processing というフレームワークで動かしてるんだけど、開発の過程でいろいろな環境を渡り歩いたので、それぞれの特徴についてまとめてみる。

Processing について簡単に

MIT メディアラボ開発のビジュアルプログラミング環境。ビジュアルアートに特化している。Processing.org の Exhibition から、Processing で作られたいろいろな映像作品が見られるので、感じをつかんでほしい。基本となる実装は Java の processing.core パッケージ。

Processing 言語

• 言語: 独自の言語 (ここでは Processing 言語と呼ぶ。ほぼ Java。)
• 実行環境: JRE / Java アプレット
• 配布: Processing.org

特記せずに Processing といえばこれ。開発環境は専用のIDE である PDE (Processing Development Environment) が配布されている。コードは Java のコードにトランスコンパイルされる。

// これくらいの規模だとサクっと書けてすばらしい
// クラス使おうとすると茨の道
void setup() {
  size(640, 480, P2D);
  colorMode(HSB, 100);
  background(0);
}

void draw() {
  noStroke();
  rectMode(CORNER);
  fill(0, 5);
  rect(0, 0, width, height);
  rectMode(CENTER);
  fill(random(100), 60, 100);
  rect(random(width), random(height), 40, 40);
}

利点

• 配布が容易
  Windows / Mac / Linux で動く実行ファイル、Java アプレットが容易に作成できる。また、後述のように Processing.js でも動作可能。
• もっともサポートが期待できる
  本家なので、将来的にもっともサポートが期待できる。と思う。
• 可搬性がある
  Processing 言語で書かれたコードは Processing.js でそのまま動く。スマートフォン用の Processing 実行環境などが開発されてもそのまま動くと期待できる。
• 速度は Java とともに最速
  Java のコードに変換されて動くので速度は Java と同じ。
• 小規模プロジェクトなら簡潔
  簡単なプロジェクトなら Java より簡潔に書ける。

欠点

• ある程度の規模のプロジェクトになると問題がある
  クラスもつくれるが、Java の内部クラスになるため、扱いが難しい。
  デバッガといえるものがない。
  複数ファイルのプロジェクトでも、それぞれのファイルを単純に連結するため、エラー時の行番号がわかりにくい、パーサの仕様で color() メソッドが定義できないなど、妙なところでひっかかる。

ruby-processing

• 言語: Ruby
• 実行環境: JRE + JRuby + ruby-processing gem
• 配布: jashkenas/ruby-processing - GitHub

JRuby で Processing のライブラリを扱う。最大の特徴は、リアルタイムでコードの書き換えが反映されること。

# Processing 言語よりもさらに簡潔
# クラスも繰り返しも書きやすいし
def setup
  size 640, 480, P2D
  colorMode HSB, 100
  background 0
end

def draw
  noStroke
  rectMode CORNER
  fill 0, 5
  rect 0, 0, width, height
  rectMode CENTER
  fill random(100), 60, 100
  rect random(width), random(height), 40, 40
end

# 明示的にクラスを作る書き方もできる
# ちょっと規模が大きくなってきたらこっちのがわかりやすい
class ProcessingDemo < Processing::App
  def setup
    size 640, 480, P2D
    colorMode HSB, 100
    background 0
  end

  def draw
    noStroke
    rectMode CORNER
    fill 0, 5
    rect 0, 0, width, height
    rectMode CENTER
    fill random(100), 60, 100
    rect random(width), random(height), 40, 40
  end
end

ProcessingDemo.new :title => "ProcessingDemo", :width => 640, :height => 480

利点

• Ruby なので書きやすい
  好みだけど、当方 Rubyist なので。
• リアルタイムでコードの書き換えが反映される
  これ実際やってみると楽しい。パラメータの調整がしやすいというわかりやすい利点も。

欠点

• 配布が現実的でない
  実行環境を整えるのは開発者でないと厳しい。手元の環境で動かすのが前提ですかね。
• Java に比べると遅い
  Ruby だからか、大量のオブジェクトを扱うと Java に比べて遅くなる。HANABICS では結構多めのパーティクルを扱うので、目に見えてフレームレートが落ちた。

Java

• 言語: Java
• 実行環境: JRE / Java アプレット
• 参考: Processing in Eclipse \ Processing.org

Java のプロジェクトで processing.core をインポートして使う。

// Processing 言語とほぼ同じ
import processing.core.*;
public class ProcessingDemo extends PApplet{
  public void setup() {
    size(640, 480, P2D);
    colorMode(HSB, 100);
    background(0);
  }

  public void draw() {
    noStroke();
    rectMode(CORNER);
    fill(0, 5);
    rect(0, 0, width, height);
    rectMode(CENTER);
    fill(random(100), 60, 100);
    rect(random(width), random(height), 40, 40);
  }}

利点

• Processing 言語でなく、フル機能の Java が使える
• Eclipse などの IDE が使える
  デバッガ使えるのは便利ですね。
• 速度は Processing 言語とともに最速

欠点

• 配布が面倒
  Java プログラマでない私には PDE と同等のコンパイルはできなかった (特に OpenGL を使う場合)。Java プログラマならできると思うけど、PDE に比べると面倒であるのは間違いない。
• Java が面倒
  好みによるけど、Java が冗長で面倒。

Processing.js

• 言語: Processing 言語 / JavaScript
• 実行環境: Web ブラウザ
• 配布: Processing.js

JavaScript による実装。canvas 要素に描画する。3D コンテキストの場合 WebGL が使える。Processing 言語のコードも動くし、JavaScript でも書ける (私は CoffeeScript で書いてる)。ちなみに開発は jQuery や Env.js でおなじみ John Resig 氏。

/*  下記の canvas とライブラリの読み込みがあるものとする
    <canvas id="processing-canvas" /><script src="processing.js"></script>
    this 多すぎなのが JS らしい
*/
(function(){
  var canvas = document.getElementById("processing-canvas");
  new Processing(canvas, function(p5){
    p5.setup = function(){
      this.size(640, 480, this.P2D);
      this.colorMode(this.HSB, 100);
      this.background(0);
    };
    p5.draw = function(){
      this.noStroke();
      this.rectMode(this.CORNER);
      this.fill(0, 5);
      this.rect(0, 0, this.width, this.height);
      this.rectMode(this.CENTER);
      this.fill(this.random(100), 60, 100);
      this.rect(this.random(this.width), this.random(this.height), 40, 40);
    };
  });
}());

# 同じものを CoffeeScript で書いた例
# まあこれくらいだとあんまり変わんないけど (this. が @ になっただけでも読みやすいけど)、
# クラス (的なもの) を作ったり、for 文が多かったりするとだいぶ楽
canvas = document.getElementById("processing-canvas")
new Processing canvas, (p5) ->
  p5.setup = ->
    @size(640, 480, @P2D)
    @colorMode(@HSB, 100)
    @background(0)
  p5.draw = ->
    @noStroke()
    @rectMode(@CORNER)
    @fill(0, 5)
    @rect(0, 0, @width, @height)
    @rectMode(@CENTER)
    @fill(@random(100), 60, 100)
    @rect(@random(@width), @random(@height), 40, 40)

※ Processing 言語のコード例は省略。そのまま動きます。

利点

• 配布が容易
  とにかくブラウザだけで動くのは他にはない利点 (Java アプレットもブラウザで動くけど、起動が重い、環境によっては JRE のインストールが必要など敷居が高い)。2D なら iOS の Mobile Safari でも動く。
• JavaScript で書ける
  好みだけど Java や Processing 言語より簡潔に書ける (特に CoffeeScript を使用した場合)。
• JavaScript の開発環境が使える
  JavaScript で記述するなら JavaScript 用の開発環境が使える。CoffeeScript で書けるというのもこの特徴ゆえ。

欠点

• 速度が遅い
  これのみ、実行環境が Java でなく JavaScript なので、どうしても遅い。といっても多くのケースには実用的な速度だと思うけど。
• 非対応環境が多い
  まず IE では (そのままでは) 動かない。また 3D コンテキストを使うには、WebGL 対応ブラウザ (Firefox か Chrome) と OpenGL 2.0 対応ビデオカードが必要で、環境を選ぶ (しかも Chrome に比べると Firefox ではあんまり綺麗に描画されない)。ただ、今後は対応環境が増えていくと思う。
• Java のライブラリ
  当然だけど、Java のライブラリは使えない。かわりに JavaScript のライブラリは使えるけどまあ比較にならない。
• 拡張ライブラリ
  カメラの画像取り込みなど Processing の拡張ライブラリも使えない。これらを使用する場合、完全に選択肢からはずれる。

まとめ

表にまとめるとこんな感じ。かなり主観ですが。

私は開発・配布の容易さと将来性から Processing.js (+ CoffeeScript) で書いている。Java に精通した人なら Java もいいと思う。

ちなみに、上の表でもさらっと書いたけど、processing.core は単に Java のパッケージなので、JVM で動く他の言語、Jython、Scala、Clojure なんかでも動く (はず)。Scala については、Spde という PDE 相当の IDE もある。