catch.jp blog

デジタルをわかりやすく。

2012-2-20

Processing基礎最速入門

Category: Programming   

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

これは、ビジュアルデザイン用プログラミング言語Processing(プロセッシング)の簡単な入門記事です。

本記事の対象読者は、基本的にまるでプログラミング体験のない人。でもまあ、できればパソコンを一通り操作できる程度がいいかも(メールとか、ワープロとか)。

とはいえ、解説書一冊分の情報量はないので、Webデザインとか少しでも知っているほうが、取り組みやすいかも知れません。自分でいろいろ調べたり探究するのが好きなほうが良いでしょう。

Processingとは

『Processing（プロセッシング）は、Casey Reas と Benjamin Fry によるオープンソースプロジェクトであり、かつてはMITメディアラボで開発されていた。電子アートとビジュアルデザインのためのプログラミング言語であり、統合開発環境 (IDE) である。 視覚的なフィードバックが即座に得られるため、初心者がプログラミングを学習するのに適しており、電子スケッチブックの基盤としても利用できる。Javaを単純化し、グラフィック機能に特化した言語といえる。』　- Wikipedia Processing

Processingバージョン1.5(17 April 2011)をベースに記述しています。

とにかく始める。

Processingは、Windows以外にもMac版やLinux版がありますが、Windows版を導入してみました。

入手から起動まで

  1. ダウンロード http://www.processing.org/
    • Download Processingを選ぶ
    • WindowsかWindows(without Java)を選ぶ。
  2. 解凍する
    • Windowsの場合、解凍したフォルダは「C:」直下においたほうがいい。
    • 最初は平気だけど、ライブラリをインポートしたとき、エラーになる
  3. 「Processing.exe」アイコンをダブルクリック

これで、Processingが起動します。

IDE.png

私の場合、Javaを導入済みなので(without Java)版でOKかと思ったら、うまく動かず。Java付き版に切り替えました。

終了は、まあ普通にウィンドウを閉じるか、「File」-「Quit」を選択

Processingには、プログラムを記述したり実行するためのツールが付属しているので、これ以外に用意するものは特にありません。成果を公開するためのWebサイトとか、あれば面白いかも。

とりあえず絵を描く

次のように入力して、ツールバーの「Run」ボタンをクリック。

line(0,0,200,200);

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

line.png

次はこれ。

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

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

ellipse.png

Sizeのカッコ内は、横幅(width)と縦幅(height)の順に指定します。ellipseのカッコの中は、次の順に指定します。

ellipse(x, y, width, height);
  • x=中心の横の位置
  • y=中心の縦の位置
  • width=楕円の横幅
  • height=楕円の縦幅

ちなみにProcessingでは、行末に必ず「;」を入力します。コードが2行以上あると上から順番に実行していきます。

プログラムができたら、ツールバーの「Save」ボタンでファイルに保存します。このあたりは、ワープロとかとおなじですね。

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

いよいよアニメーション

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

mouse_move.png

サンプル sketch_anime_ellipse

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

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座標を元にしています(手を抜いていますが)。

成果を公開する

先ほど説明したようにProcessingには、プログラムを記述したり実行するための機能がついています。ツールバーには、次のボタンがあります。

ボタン名 役割
Run プログラムの実行
Stop プログラムの停止
New プログラムの新規作成
Open 既存のプログラムを開く
Save 作成中のプログラムを保存する
Export Applet Javaアプレットへの変換
------------- --------------

作成したプログラムは、サンプル sketch_anime_ellipseのようにWebサイトに掲載可能です。これは、Javaアプレットという技術を使っています。

Javaアプレットに変換するには、ツールバーの「Export Applet」ボタンをクリックします。これで、必要なファイル一式が作成されます。作成されたファイルは、「マイドキュメント」->「Processing」->「(プログラム名)」->「Applet」にあるはずです。これをWebサーバに配置すれば、サンプルのように他の人も成果を見ることができます。

また、Javaアプレットではなく、単独のアプリケーションのようにして配布することも可能です。これには、「File」->「Export Application」を選択します。

Processingの命令を調べる

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

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

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

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

座標の指定方法

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

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

dimension.png

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

Processingの座標も、これとほぼ同じです。ただ、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);

line2.png

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

固定された絵ばかり描いていてもつまらないので、また動かしてみることにしましょう。もう一度、アニメーションsketch_anime_ellipseのプログラムコードを見てください。

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);」の行頭に「//」を追加してみてください。すると、前に描いた楕円はぬりぶつされず、楕円がどんどん重ね塗りされていきます。

mouse_move2.png

サンプル sketch_anime_ellipse2

void setup() {
  size(250, 250);
  frameRate(20);
}
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」の円が描かれていきます。つまり、簡単なペイントツールのようになるのです。

mouse_move3.png

サンプル sketch_anime_ellipse3

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

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

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

mouse_move4.png

サンプル sketch_anime_ellipse4

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

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

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

色を指定する

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

色指定で背景色を変える

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

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

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);

color_back_white.png

Processingでは、このように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);

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

color_back_mouse.png

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

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);

色の指定方法

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

種類 例
グレースケール (255)
グレースケール,透明度 (255,30)
RGB (255,0,0)
RGB、透明度 (255,0,0,30)
RGB：16進表示 (#FF0000)
RGB、透明度：16進表示 (#FF0000, 30)
------------- --------------

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

図形の色を変える

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

color_line_red.png

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);

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

color_line_mouse.png

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

フェードアウト

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

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

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

color_circle_fade.png

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

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

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

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

文字の表示

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

letters.png

サンプル sketch_anime_letters

基本形

こんな感じ

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

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

letter.png

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);

フォントを指定する

フォントを指定するためには、Processingのエディタで、専用のフォントデータを作成しておく必要があります。

フォントデータの作成手順は、

  1. 「Tool」-「Create Font」
  2. 「Create Font」ウィンドウが表示されたら、利用したいフォントとサイズを指定
  3. 「OK」ボタンをクリック

これで、「マイドキュメント」->「Processing」->「(プログラム名)」->「data」フォルダに、「*.vlw」という拡張子のフォントデータファイルができています。このdataフォルダは、常にプログラムファイルと同じ位置に置くようにします。Appletとして公開する場合も、同様です。

プログラム中で、フォントを指定するには、次のようにPFontクラスを使います。

PFont font = loadFont("Arial-Black-48.vlw"); //フォントの読込み
textFont(font); //フォントの指定
textSize(24);
fill(0);
text("Hello world",10,30);

letters_font.png

サンプル sketch_anime_letter3

なお、事前にフォントデータを作っておかなくても利用できるcreateFont命令がありますが、コンピュータごとに収録されているフォントが異なっている場合があり、注意が必要です。

参考情報

プログラムによる操作

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

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

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

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

bounce_a_ball_fade.png

サンプル bounce_ball_1

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

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

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

bounce_balls_fade.png

サンプル bounce_ball_20

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

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

衝突する複数のボール

push_balls_fade.png

サンプル push_balls

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

動物の群れ

動物の群のような動きを再現してみました。

boid_102.png

サンプル boid

映画やCG・アニメーションで登場する動物の群などは、boid(ボイド、Bird + doid 鳥もどき)と呼ばれる仕組みで動いています。これは、シンプルな３つのルールで、各ボールの動きを制御することで、動物の群のような動きを作り出しています。Processing Discourse - Simple Boid Sketchのコードを大いに参考にさせてもらいました。

フルスクリーン表示

でっかいプロジェクターで見せびらかしたい時は、Fullscreen API for Processingを使います。

準備１：プログラムを軽くする

そのまま全画面表示(フルスクリーン)にすると、重くて遅くなる場合があります。 そのために、ウィンドウサイズ 640 x 480くらいで、そこそこ動くように次のよう、事前に調整しておきます。

  • フレームレート(framerate)を小さくする
  • 表示するオブジェクト数を少なくする
  • ループ回数を減らす

準備２：FullscreenAPIを導入する

  1. 以下のサイトのDownloadからfullscreen.zipをダウンロードする
  2. 解凍してできたfullscreenというフォルダを「(processingの解凍フォルダ)\modes\java\libraries」フォルダに丸ごと入れる

Fullscreen APIがうまく導入できていれば、Processingのエディタで「Sketch」-「Import Library」メニューを見たとき、「Fullscreen」が追加されているはず。

プログラム本体を調整する

フルスクリーンにしたいプログラム、次のコードを記述します。

//先頭行
import fullscreen.*; 
FullScreen fs; 

//setupの中
size(640, 480);
frameRate(10);
fs = new FullScreen(this); 
fs.enter();
noCursor(); //オプション：マウスカーソルを消す場合

これで、プログラムを「Run」すると、サイズ(640, 480)に合わせて画面解像度が変更されて、フルスクリーンで表示されます。

フルスクリーン表示を終了するには、[ESC]キーを押します。

アプリケーションとして配布する

  1. 「File」-「Export Application」を選択
  2. ダイアログボックスが表示されたら、次のように設定する
    • Windows
    • Fullscreen (Present mode)

これで完成。「application.windows」フォルダの中身を丸ごと配布。

実行時は、exeファイルをダブルクリックする。

参考

すごそうな作品たち

解説書

リンク