Processing.jsの使い方

javascript (18), processing-js (9)

最近にJohn ResigのProcessing.jsが出た。その面白いプロジェクトを使って、Processingのコードをウェブブラウサーで走られる。今から少しだけなぜ面白いと考えって、後で使い方を説明する（説明しようとする方かな）。

なぜProcessing.jsは面白い？

その質問に[色々な答え]1あるけど、今は二つだけ言う。

  1. 最初、Processingの目的と仕方はとてもいい考えだけど、Javaのシンタクスはかなり使いにくいと思う。ずっと前から何かRubyやPythonのようなシンタクスがあればいいかなと思っていた。それで、JavaScriptが使えることを気について、ちょっと喜んだ。Processingの目的はなるべく簡単なプログラムを作ることだって、JavaScriptでJavaよりその夢ができると思う。 もちろん普通のProcessingのシンタクスも使えるけど、JavaScriptでProcessingなようなコードを書くのは本当に楽しい。

  2. 二番目の理由は、_whyが言ったとり,JavaのAppletはインタネットから逃げてくれるかもしれない。私にとってAppletはいつでも死なれないけど、だんだん少なくなるだろう。

ダウンロード

Processing.jsはかなり始めやすいけど、最初一二つファイルをダウンロードをしなくてはいけない。一番目、Processing.jsをダウンロードしておく。次、新しいウェブブラウサーをダウンロードしておく。FirefoxやWebKitやOperaはどうちでも使えるんだ。（実は、この例で古いブラウサーでも大丈夫だ。）

準備

必要なファイルがあるから、今はプログラミングの準備をしておく。

  1. 新しいフォルダを作る。何か「Processing」みたいな名前を使っておく。

  2. ダウンロードしたProcessing.jsというファイルを作ったフォルダに入れておく。

  3. 同じのフォルダに新しいファイルを作っておいて、「init.js」と呼ぶ。

その準備ができたまま、init.jsのファイルにこのコードを入れる。

window.onload = function()
{
  var canvas = document.getElementsByTagName("canvas");
  for ( var i = 0; i < canvas.length; i++ )
  {
    Processing( canvas[i], canvas[i].previousSibling.textContent );
  }
};

（「init.js」のコードはJohn Resigが作って、私が書いたわけじゃない。）

今から残余は簡単なHTMLのファイルを作くるのだけだ。

Processing.jsの使い方

使い方の一番難しい点は普通のProcessingのコードを書く事なんだ。できれば、あまり変わらないHTMLのページに入れて終わる。そのHTMLのページができたら、何回も使えて、次のProcessing.jsのプログラムを作る時はProcessingのコードだけ書かなくてもいい。

それで、その大事なHTMLのページを作ろう。前と同じのファルダで「test.html」というファイルを作っておいて、このHTMLを入れる。

<html>
  <head>
    <title>一つのProcessing.jsの例</title>
    <script type="text/javascript" src="processing.js"></script>
    <script type="text/javascript" src="init.js"></script>
  </head>
  <body>
    <h1>一つのProcessing.jsの例</h1>
    <script type="application/processing">
    </script><canvas></canvas>
  </body>
</html>

開いてるタイプの「application/processing」のscriptの場所をよく見る。それはProcessingのコードに入れる場所なんだ。続いて、例のページを見ながらProcessingのコード例の一つを選ぶ。私はSetup and Drawという例を選んだ．その例のコードは

void setup() 
{
  size(200, 200);  //　サイズはいつも最初だ
  stroke(255);     // 線の書く色は白い
  frameRate(30);
}
float y = 100;
void draw() 
{ 
  background(0);   // バックグラウンドの色は黒い
  y = y - 1; 
  if (y < 0) { y = height; } 
  line(0, y, width, y);  
}

次、前のHTMLのファイルにそのコードを入れる。入れたら、ファイルはこれみたいだ。

<html> <head>
<title>一つProcessing.jsの例</title>
<script type="text/javascript" src="processing.js"></script>
<script type="text/javascript" src="init.js"></script>
</head>
<body>
<h1>一つProcessing.jsの例</h1>
<script type="application/processing">
void setup() 
{
  size(300, 300);
  stroke(255);
  frameRate(90);
}
float y = 100;
void draw() 
{ 
  background(0);
  y = y - 1; 
  if (y < 0) { y = height; } 
  line(0, y, width, y);  
}
</script><canvas></canvas>
</body> </html>

それで、ウィブブラウザーで開けて見る。例と同じように見えるはずなんだ。けっこう簡単で面白いじゃない？

終わりの考え

今から好きなように色々なゲームや絵ができて、少しい使ったら、Processing.jsはいい道具になると思う。Processingの質問があればそのサイトでProcessingの何でも調べられる。ちょっと悪いけど、前のなぜProcessing.jsは面白いの一番目の理由は全然説明しなかってごめん。そんな説明はもう英語で書いたから、すぐ日本語まで訳す予定だ。

問題や質問や文句などあればもちろんメールして下さい。

  1. 例えば、PHP（やRubyなど）とProcessing.jsを両方使ったらけっこう面白くてきれいなプログラムを作られると思う。↩