Processing.js基礎最速入門

※「catch.jp-wiki」から移動したページです。

Processing.jsは、ビジュアルデザイン用プログラミング言語の先輩格である「Processing」をベースに、最新のWeb環境(HTML5のCanvas要素、Javascriptあたり)で手軽に使えるようにしたものです。

この記事は、そんなProcessing.jsの簡単な入門記事です。先に書いたProcessing基礎最速入門の姉妹編になります。

本記事の対象読者は、基本的にまるでプログラミング体験のない人。でもまあ、Webデザインとか少しでも知っているほうが、取り組みやすいかも知れません。自分でいろいろ調べたり探究するのが好きなほうが良いでしょう。

2011-06-06:Processing-1.2.1.js で動作確認しています。

とりあえずサンプルを見る

まずは、実際に動いているところを見てみましょう。

動物の群シミュレーション

これは、動物の群っぽく動くシミュレーションで、Boidと呼ばれます。「ピクミン」とか映画のコンピュータグラフィックスとかで使われているテクニックです。

サンプルを見る＞＞boid

processing.jsを使うと、こういうのを自分で作ることができるようになります。

いろいろなサンプル

このほかにも、いろいろとスゴイ実例があります。

• Abstract01js
• BallDroppings instructionsドラッグで線を描いて落ちてくるボールで音楽を作る
• A Mouse-driven Graphic Equalizerマウスの動きをビジュアル化
• UI Dial with Snapsマウス操作のデモ
• Processing.js公式サイトExhibition
• Processing.jsレッスン このページの後半に、多数のサンプルプログラムあり。

動作環境の確認

うまく動かない場合は、動作環境を確認しましょう。

次のような、HTML5に対応しているWebブラウザが必要です。

• Firefox
• Safari
• Goolge Chrome
• Opera
• Internet Explorer 9

Webブラウザの種類とバージョンを確認してください。

とにかく始める

どんなものが作れるのか分かったら、早速作ってみましょう。

自分でプログラムを書いてみる

では、最も単純なプログラムで自分なりに簡単に修正してみましょう。最初は、こんな感じです。

1. Processing.jsの練習場
2. 「Run」ボタンをクリック

四角の中に直線が引かれましたね。

右の四角いスペースには、次の一文が書いてあります。

line(0, 0, 100, 100);

これが、Processing.jsのプログラムコードです(略して、コードと呼びます)。ここでは、座標(0,0)から座標(100,100)まで直線(line)を描きました。

それでは、このコードを次のように修正してみてください。最後の数値を100から50に変えます。

line(0, 0, 100, 50);

これで、直線の位置が変わりましたね。

Processing.jsなどのプログラミング言語の多くは、こんな感じでプログラムを書いていきます。数値を色々と変えて、どんなふうになるか試してみてください。

とりあえず絵を描く

では、直線以外のものも描いてみましょう。まず先ほどの直線ですが、もう一度見直してみましょう。

1. Processing.jsの練習場

line(0,0,100,100);

これで、左上から右下に直線(Line)を描きました。カッコ内は、（x1, y1, x2, y2）を順に指定してします。「x1, y1」が線の一方の端の座標。「x2, y2」が、もう一方の端の座標です。

では、次はこれを描いてみましょう。

size(250, 250);
ellipse(120,120,80,80);

描画ウィンドウのサイズ(Size)を変更して、そこに円(ellipse:楕円)を描きます。

Sizeのカッコ内は、描画領域のサイズを横幅(width)と縦幅(height)の順に指定します。

ellipseのカッコの中は、描く楕円の位置とサイズを次の順に指定します。

ellipse(x, y, width, height);

• x=中心の横の位置
• y=中心の縦の位置
• width=楕円の横幅
• height=楕円の縦幅

ちなみにProcessing.jsでは、コードが2行以上あると上から順番に実行していきます。それから、「;」で行末を表すことができます。これは、行末が明確に区別できれば、あってもなくても構いません。Processingでは「;」が必要なので、互換性のために付けておくといいかもしれません。

ま、ここまでは同じ絵を描くだけなので、プログラムとしてはさほど面白くありませんが。

いよいよアニメーション

今度は、マウスの動きに合わせて、描く絵を変えてみましょう。マウスの位置を調べて、それに合わせて楕円を描きます。

サンプル ＞ mouse_move

以下のコードを入力してみてください。

void setup() {
  size(250, 250);
  frameRate(20);
}
void draw() {
  background(0);
  ellipse(width/2, height/2, mouseX, mouseY);
}

プログラムは大きく二つの部分に分かれていて、前半が「void setup()」、後半が「void draw()」となっています。プログラムの本体は、「{」と「}」の間に書きます。この場合は、「}」の後ろに「;」をつけません。

前半の「void setup()」が、アニメーションの初期設定です。setup() 以下の{...}の中身は、起動時に１回だけ実行されます。今回は、描く領域のサイズとフレームレート(frameRate:1秒間に何コマ描くか)を指定しています。

後半の「void draw()」は、アニメーションの繰り返し設定です。draw()以下の{...}の中身が、フレームレートごとに何度も実行されます。今回は、背景色(background)を指定し、それから楕円(ellipse)を描いています。楕円の中心位置は、横幅(width)の半分と縦幅(height)の半分。つまり、描画エリアのちょうど中央。楕円のサイズは、マウスのX-Y座標を元にしています(手を抜いていますが)。

Priocessing.jsの命令を調べる

Processing.jsは、lineやellipseなどの命令(コマンド)を組み合わせて描いていきます。

各命令の使い方を調べるには、Processing.js公式サイトのReferenceページをみます。たとえば、lineやelipseなどのページがあります。

英語で書いてあるので読みにくいですが、形式が一定なので、その形式を調べたりサンプルコードを試したりすれば十分使えると思います。

少し情報が古いかも知れませんが、Processingの日本語版リファレンスも参考になります。

• Language (API) \ Processing 1.0 (BETA)日本語版リファレンス

座標の指定方法

ProcessingやProcessing.jsのようにプログラムで絵を描くには、２つのポイントを理解が不可欠です。ひとつは、絵の対象となる絵の具やキャンバスなどの素材(マテリアル)がどのようになっているのか。もうひとつは、このような絵を描くための素材(マテリアル)を、どのようにプログラムから操作するのか。ここでは、絵を描くための素材(マテリアル)について簡単に説明します。

さて、Processing.jsで絵を描くとき、その位置を2つの値からなる座標で指示します。たとえば、直線を描くには両端の点を指定します。

中学校あたりの数学に登場するグラフは、X軸とY軸の直交座標上に描いていました(覚えていますか?)。 横軸をX軸、縦軸をY軸と呼び、この二つの軸が直角に交わっています。 X軸とY軸の直交するところ(0,0)は、原点と呼ばれました。 直交座標上の、とある点の座標は、原点からX軸上の位置aと、原点からY軸上の位置bの、二つの値(a,b)で指定します。

Processing.jsの座標も、これとほぼ同じです。ただ、X軸が右に行くほど値が大きくなるのに対して、Y軸は下にいくほど値が大きくなるところだけ違っています。描画エリア(CANVAS:キャンバスと呼びます)の左上の角が原点(0,0)になっています。

たとえば、直線を描く場合、1つ目の端が座標(0,0)、もう一つの端が座標(200,200)というように指定します。この2点間に線を引くには、「line(0,0,200,200);」と記述します。

描画エリアのサイズは、Size命令で、横幅(width)と縦幅(height)の順に設定します。

size(250, 250);

そうすると、現在の描画エリアの大きさは、「width」と「height」で取り出せます。 次のように記述すると、描画エリアの対角線を2本描きます。

line(0,0,width,height);
line(width,0,0,height);

サンプル ＞ lines

アニメーションとマウス操作

固定された絵ばかり描いていてもつまらないので、また動かしてみることにしましょう。先ほどのアニメーションmouse_moveのプログラムコードを少しずつ改造していきます。

サンプル ＞ mouse_move

void setup() {
  size(250, 250);
  frameRate(20);
}

void draw() {
  background(0);
  ellipse(width/2, height/2, mouseX, mouseY);
}

重ね塗りとコメント文

setup() 以下の{...}の中が起動時に一回だけ実行されて、draw()以下の{...}の中身が、フレームレートごとに何度も実行されるのでした。

ここで、draw()以下に「background(0);」がありますよね、backgroundは、ウィンドウを塗りつぶすための命令です。(0)を指定しているので、黒色で塗りつぶして、それから「ellipse()」で楕円を描いています。そのため「background(0);」で塗りつぶすときに、前に描いた楕円も塗りつぶされて消えてしまいます。

ここで、次のように「background(0);」の行頭に「//」を追加してみてください。すると、前に描いた楕円はぬりぶつされず、楕円がどんどん重ね塗りされていきます。

void draw() {
  //background(0);
  ellipse(width/2, height/2, mouseX, mouseY);
}

サンプル ＞ 重ねて描く

「//」は、コメント文を表す記号です。この記号の右側から行末までに書かれた内容は、プログラムとしては無視されます。プログラムの説明文を記述したり、プログラムの特定部分をプログラムから外す(でも、あとで戻せるようにしておく)ために使われます。

今回は、「background(0);」の前に「//」を書いたので、「background(0);」がプログラムとして無視されて、黒色での塗りつぶしがされなくなりました。その結果、楕円が次々の重ね塗りされているのです。

マウスの位置に描く

続いて、楕円を描く部分を次のように変更してみましょう。

変更前

ellipse(width/2, height/2, mouseX, mouseY);

変更後

ellipse(mouseX, mouseY, 10, 10);

変更前は、楕円の中心をウィンドウの中心に固定して、楕円のサイズをマウスの位置によって変えていました。 変更後は、楕円の中心をマウスの位置によって変えて、楕円のサイズを「10,10」に固定しています。 こうすると、マウスの動きに合わせて、サイズ「10,10」の円が描かれていきます。つまり、簡単なペイントツールのようになるのです。

サンプル マウスの位置に描く

void setup() {
  size(250, 250);
  frameRate(20);
}
void draw() {
  //background(0);
  ellipse(mouseX, mouseY, 10, 10);
}

クリックしたときだけ描く

そして最後に、マウスのクリック時だけ円を描くようにしてみましょう。「draw()」以下の「{...}」の中身を空っぽにして、さらに「void mousePressed()」を追加、その「{...}」の中身に、楕円を描く命令を記述しています。

サンプル クリックしたときだけ描く

void setup() {
  size(250, 250);
  frameRate(20);
}
void draw() {

}
void mousePressed() {
  ellipse(mouseX, mouseY, 10, 10);
}

「mousePressed()」は、マウスのクリック時の動作を設定する命令です。「draw()」以下の「{...}」は、フレームレートごとに呼び出されていましたが、「mousePressed()」以下の「{...}」は、マウスの左ボタンを押したときだけ実行されます。

色を指定する

続いて、色の指定方法を説明します。色を変えられると表現力がぐっと増しますね。

色指定で背景色を変える

Processing.jsでは、数値で色を指定します。

さきほどの、マウスの位置に合わせて楕円を描くサンプルプログラムをもう一度見て下さい。

void setup() {
  size(250, 250);
  frameRate(20);
}
void draw() {
  background(0);
  ellipse(width/2, height/2, mouseX, mouseY);
}

「void draw() {」のすぐ下に、次の一行がありますよね。

background(0);

これで背景(background)を黒色で塗りつぶしています。「0」が黒色を表しています。

背景を白色で塗りつぶすには、次のように指定します。

background(255);

サンプル ＞ 背景色を白色にする

Processing.jsでは、このように0～255の数値で色を指定します。「255」が中途半端ですが、これはコンピュータで処理しやすいキリの良い数値なのです。

色の3原色で指定する

でも、これでは赤とか青は指定できませんね。そこで次のように3つの数値の組み合わせで指定します。次の例は、うすい赤色で背景を塗りつぶします。

background(200,0,0);

Processingでは、色の3原色つまり赤(R:Red)、緑(G:Green)、青(B:Blue)の3つの色の量で表すことができます。この例では、前から順番に赤(200)、緑(0)、青(0)です。

色の3原色方式では、次のように16進表記ができます。これは、HTMLなどWebデザインをする人には分かりやすいでしょう。

background(#FFCC00);

では、ひとつだけ応用例を見てみましょう。次のプログラムは、マウスの位置に応じて楕円の大きさを変えると同時に、背景色も変えています。

サンプル マウスの位置で背景色を変える

void setup() {
  size(255, 255);
  frameRate(20);
}

void draw() {
  background(mouseX, 0, mouseY);
  ellipse(width/2, height/2, mouseX, mouseY);
}

マウスの位置(mouseX, mouseY)を背景色の赤と青に指定しています。

  background(mouseX, 0, mouseY);

色の指定方法

色の指定方法を整理すると、次のようになります。これまで説明してきた方法のほかに、透明度を指定することもできます。

詳細は、Referenceで「color()」を調べて見てください。

• color() \ Language (API) \ Processing.js
• color() \ Language (API) \ Processing 1.0 (BETA) 日本語版

図形の色を変える

次は、楕円の輪郭や塗りつぶしの色を変えてみましょう。楕円などの図形の色を変更するには、まず色を指定して、それから図形を描くよう指示をします。

void setup() {
  size(250, 250);
  frameRate(20);
}

void draw() {
  background(255);
  stroke(255, 0, 0);//輪郭線の色を指定
  ellipse(width/2, height/2, mouseX, mouseY);
}

ここでは、次のように「stroke」命令で輪郭線に赤色を指定しています。

stroke(255, 0, 0);

ちなみに、線の太さを指定するには、strokeWeight()命令で設定します。

塗りつぶし色を指定する場合には、次のように「fill」命令で指定し、それから図形を描きます。

fill(255, 0, 0);

応用例として、マウスの位置に合わせて、楕円の輪郭色が変わるサンプルを作ってみました。

サンプル マウスの位置で輪郭色を変える

フェードアウト

これまでの例では、背景を塗りつぶすことで、以前に描いた図形も塗りつぶしていました。また、塗りつぶしをやめると、以前に描いたものがずっと残っていました。

そこで、半透明な白で画面を塗りつぶすようにしてみましょう。こうすると、描いた図形が少しずつフェードアウトしていくように表現できます。

次のサンプルでは、同じ大きさの円をマウスの位置に描いていきます。

サンプル マウスの位置に円を描き、徐々にフェードアウト

背景を塗りつぶすかわりにフェードアウトさせる「fadeToWhite()」命令を追加しています。

//フェードアウト
void fadeToWhite() {
  noStroke();
  fill(255, 30);
  rectMode(CORNER);
  rect(0, 0, width, height);
}

このテクニックは、Built with Processing(Ver 1.x対応版)-デザイン/アートのためのプログラミング入門を参考にしました。

文字の表示

色を変える次は、文字を表示してみましょう。

サンプル sketch_anime_letters

基本形

こんな感じ

 fill(0);//文字の色
 textSize(24);//文字のサイズ(ピクセル数)
 text("A",10, 10); //表示する文字と位置

文字の色は、fill命令で指定します。文字のサイズは、ピクセル数で指定します。

サンプル test_letters

size(250, 250);
background(255);

fill(0);
textSize(20);
text("Hello",10,30);

fill(255,0,0);
textSize(40);
text("Hello",10,100);

fill(0,0,255);
textSize(80);
text("Hello",10,200);

フォントを指定する

2012-10 日本語フォントを指定する方法を追記。

フォント名は、英語名で指定する。

明朝なら「serif」、ゴシックなら「sans-serif」。

fill(0);

PFont fontA = loadFont("serif");
textFont(fontA, 18);
text("あいうえお", 10, 30);

PFont fontB = loadFont("sans-serif");
textFont(fontB, 18);
text("かきくけこ", 10, 60);

• 参考_words-demo

プログラムによる操作

次は、絵を描くための素材(マテリアル)を、どのようにプログラムから操作するのか、理解しておきましょう。 とりあえず、次のようなProcessingの参考資料を読んでみてください。デザイン系大学の授業の資料です。

• Processing入門講座
• Processing 学習ノート
• FrontPage - 教員のためのプログラミング入門

ProcessingとProcessing.jsは、文法がほとんど同じなので、参考になると思います。

オブジェクトを使ったサンプルプログラム

簡単なサンプルをいくつか作ってみました。

1個のボールが、はねかえる

サンプル bounce_ball_1

1個のボールが、ウィンドウ内をはね回ります。Ballオブジェクトでボールを表現しています。

本当は、ボール１個だけならオブジェクトを作るまでもないのですが、次のように複数のボールを扱う場合に便利です。

複数のボールが、はねかえる

サンプル bounce_ball_20

複数のボールが、ウィンドウ内をはね回ります。ただし、ボール同士は衝突しません。ここでは、Ballオブジェクトを配列で管理しています。

Processingに付属のExamplesのうち、「Topics - Motion - BounceBubbles」が参考になりました。

衝突する複数のボール

サンプル push_balls

複数のボールが、ウィンドウ内をはね回ります。ボール同士も衝突します。

• 参考：Bubbles

動物の群れ

冒頭でも紹介したboidで、動物の群のような動きを再現してみました。

サンプル boid

Boid(ボイド、Bird + doid 鳥もどき)れは、シンプルな３つのルールで、各ボールの動きを制御することで、動物の群のような動きを作り出しています。Processing Discourse - Simple Boid Sketchのコードを大いに参考にさせてもらいました。

• ボイド (人工生命) - Wikipedia
• Boids Test Built with Processing | 空即是色 | null-null.net
• Processing Discourse - Simple Boid Sketch
• Processing boid 金魚
• ほぼ日刊イトイ新聞 - がんばれ森川くんの遺伝子くん
• Boids (Flocks, Herds, and Schools: a Distributed Behavioral Model)

花火

jsdo.itに投稿したもの。

• processing.js: yet another firework - jsdo.it - Share JavaScript, HTML5 and CSS

画像ファイルの表示

Processing.jsでは、画像ファイルを読み込むには、それに先立ってブロックコメント中に「@pjs preload="sora-mame.png";」と記述する。これで、画像ファイルを先読みする。

//画像を表示
/* @pjs preload="sora-mame.png"; */
size(300,300);
PImage b;
b = loadImage('sora-mame.png');
image(b,0,0);

自分のパソコンに環境を作るには

Webブラウザから実行しても良いのですが、自分のパソコンにも同じ環境を用意したいですよね。そうすれば、インターネットに接続しなくて、Processing.jsを楽しめます。

環境の作り方

そこで、次のようにしてProessing.jsをダウンロードしておきましょう。

1.以下にアクセスして、最新の「Zipped Source」をダウンロードする

• https://github.com/processing-js/processing-js
• (例：processing-js-1.6.6.zip)

2.ファイルを解凍する

3.下記の編集用HTMLファイル(edit.html)を右クリック->「名前を付けてリンク先を保存」

• 編集用HTMLファイル

4.保存した「edit.htm」lファイルを、Processing.jsを解凍したフォルダに放り込む

5.その「edit.html」をダブルクリック

これで、インターネットに接続していないときでも、Processing.jsが楽しめるようになりました。先ほどと同じように「Run」ボタンで直線が描けるか試してみてください。

うまく動かないときは

もしもうまく行かないときは、ダウンロードしたProcessing.jsのバージョンを確認してください。今回は、「processing-js-1.2.0.zip」を想定しています。これとは違うバージョンの場合、htmlファイルの一部を次のようにして書き換えます。

1. 「edit.html」を右クリック->「編集」
2. HTMLファイルの中身がテキストファイルとして表示されたら、6行目にある「processing-js-1.2.0.js」を自分の入手したバージョンに合わせて書き換える。

<script type="text/javascript" src="../js/processing-1.2.0.js"></script> 

成果を公開するには

Processing.jsは、JavaScriptをベースにWebブラウザで動作するので、プログラミングの成果を公開するには、Webサイトに公開するのが良いでしょう。

Webページに公開するには、次のデータを用意します。

• Proseccing.js本体
• プログラムコード
• HTMLファイル

方式としては、HTMLファイルにコードを埋め込んでしまう方法と、別のコードファイルを呼び出す方法があります。前者の「HTMLファイルにコードを埋め込む」方式は、単純な短いコードのときに有効です。後者の「別のコードファイルを呼び出す」方式は、少しややこしいプログラムのときに役立ちます。冒頭の「Boid:動物の群シミュレーション」は、後者の方法で作ってあります。

HTMLファイルにコードを埋め込む

まず、HTMLファイルにプログラムコードを全部埋め込むとこんな感じになります。Proseccing.js本体は、同じフォルダに配置します。

サンプルを見る＞＞HTMLファイルにコードを埋め込む

<html>
    <head>
       <script src="processing-1.2.1.js">
       </script>
       <script>
         window.onload = function(){
           // canvas要素
           var canvas = document.getElementsByTagName('canvas')[0];
           // Proccessingのコードが書かれたscript要素
           var codeElm = document.getElementById('processing-code');
           // 上記要素の内容を取得
           var code = codeElm.textContent || codeElm.innerText;

           new Processing(canvas, code);
         };
       </script>
       <script id="processing-code" type="application/processing">
     void setup() {
       size(250, 250);
       frameRate(20);
     }
     void draw() {
       background(0);
       ellipse(width/2, height/2, mouseX, mouseY);
     }
       </script>      
    </head>
    <body>
<canvas width="250" height="250"></canvas>
<p>Copyright 2011 Yutaka Kachi Licensed by MIT License<p>
<p>Implement by <a href="http://processingjs.org/">Processing.js</a><p>
    </body>
</html>

このHTMLファイルをよく見ると、～の中に、が3つあります。各が1つだけあり、ここの"src"属性でprocessing.jsの位置を指定しています。

そして、～には、次のようなタグがあり、ここの"datasrc"属性で、呼出したいコードファイルを指定しています。コードファイルの拡張子は、「*.pde」か「*.pjs」です。作成するには、テキストファイルとして記述して、拡張子を変更して

<canvas datasrc="sample20.pjs" width="250" height="250"></canvas>

成果を公開するには、このHTMLファイルとコードファイル、processing.js本体をWebサーバーの同一フォルダに配置します。

jsdo.it

javascriptの投稿サイト「jsdo.it」でもprocessing.jsで投稿できました。 公開されているコードを元に改良する(fork:枝分かれ)するのも簡単なので、いろいろ試すのに便利です。

• jsdo.it - Share JavaScript, HTML5 and CSS
• my processing.js test - jsdo.it - Share JavaScript, HTML5 and CSS
• yet another simple boid - jsdo.it - Share JavaScript, HTML5 and CSS
• processing.js - jsdo.it - Share JavaScript, HTML5 and CSS

花火大会

• processing.js: yet another firework - jsdo.it - Share JavaScript, HTML5 and CSS
• HTML5 Fireworks - jsdo.it - Share JavaScript, HTML5 and CSS
• HTML5花火大会をみんなで作ろう！ - jsdo.it - Share JavaScript, HTML5 and CSS

参考

参考となりそうな資料です。

Processing.js

• wise9 › 第１回 Processing.js で初めてのゲームプログラミング
• wise9 › 第２回 Processing.js で初めてのゲームプログラミング
• wise9 › 第３回 Processing.js で初めてのゲームプログラミング
• wise9 › 第４回 Processing.js で初めてのゲームプログラミング
• wise9 › 第５回 Processing.js で初めてのゲームプログラミング

• wise9 › 第６回 Processing.js で初めてのゲームプログラミング

• ブラウザでお絵描きプログラミング！ Processing.js 登場！ - IT戦記

• Processing.jsで魚の群れシミュレーション - もやし日記

• Processing.jsの使い方 - Irrational Exuberance

• iPadに対応したProcessing.js「pjs4iPad」 - MOONGIFT

• Processing.js で物理シミュレーション - Usipedia

• Processing.js

• 高度な表現力を実現したJavaScriptフレームワーク「toxiclibs.js」 - MOONGIFT

• Education/Projects/ProcessingForTheWeb - MozillaWiki

JavaScript

• いまさら聞けないJavaScript入門（1/3） - ＠IT

• 新JavaScript入門

• JavaScript基本概念最速マスター - TechTalkManiacs

• JavaScript基礎文法最速マスター - なんとなく目記
• JavaScript入門
• とほほのJavaScriptリファレンス
• JavaScript入門
• JavaScriptの”this”をめぐる冒険 |