Processing基礎

Processingとは?

Design by Numbersを前身として、ベン・フライとケイシー・リース(下写真)によって開発されたJavaベースのプログラミング言語と開発環境。2001年にプロトタイプが発表され、その後、アルファ版、ベータ版を経て2008年にバージョン1.0がリリースされた。2017年9月現在はバージョン3.3.5が最新。


Ars Electronica Goldene Nica Net Vision  Benjamin Fry, Casey Reas (US)

テキストベースのIDE(統合開発環境)にプログラムを入力し、Runボタンを押すだけで実行できる。サンプルプログラムで動きを確認しながらプログラミングに慣れていくことができる。プログラミング未経験者にとっては実感がわかないかもしれないが、ライブラリや実用的なサンプルが最初から用意されていて、すぐに動かすことができるというのは画期的なことだ。C言語をはじめて学習した時などはプログラムを動かすまでに時間を要し、それだけで挫折することも少なくない。

日本語の書籍も多数発行されており独学でも十分習得できる。英語ができれば、本家サイトだけでもかなりのことが理解できる。どちらかと言えばグラフィックの描画を得意とし、テキストベースで短時間で試行錯誤を繰り返せるのでGenerative Artのアルゴリズム構築に長けていると言える。個人の印象。下はhttp://www.generative-gestaltung.deに公開されているサンプルデータによって生成された画像。

Back To Top

Processingのダウンロード

公式サイトのダウンロードページ(下記URL)から可能。Windows、Linux、Mac版がある。
映像メディア室ではすでにインストールされている。

Mac版ではダウンロード後、zipファイルを解凍する。アプリケーション本体(Processing.app)をアプリケーションフォルダなどに移動して利用する。

Back To Top

Processingの起動

DockのProcessingアイコンをクリックして起動する。

空のスケッチ(Processingのプログラムファイル)ウィンドウが表示される。

Back To Top

Sketchフォルダの設定(設定済み)

Processingメニューから環境設定をクリックする。

Processingで作成したスケッチ(プログラム)やライブラリはスケッチブックの場所に保存される。

映像メディア室のiMacでは上図の場所、つまりMacintosh HD/ユーザ/st/書類/Processingの中にある。

映像メディア室では再起動すると全てのデータは削除されるため、必要なデータはバックアップすること。

Back To Top

各種環境設定(設定済み)

Processingでは環境設定から様々な設定を行うことができる。特にコメント記述時など、コード内に日本語を利用する場合はフォントをMenloなどの日本語対応フォントにしておかないと文字化けする。

映像メディア室では以下のように設定している。

Back To Top

RunとStop

①Run(スケッチの実行)

Processingのプログラムはスケッチ(Sketch)と呼ばれる。

スケッチの実行には下図のRunボタンを押す。今はプログラムを何も記述していないが、小さな空のウィンドウが立ち上がる。

 

②Stop(スケッチの停止)

スケッチを停止するためには下図のStopボタンを押す。

Runしたまま次のプログラミングを行うこともできるが、PCに負荷がかかるので、Stopしてから次のプログラミングを実行したほうがよい。

Back To Top

ウィンドウを描く

①ウィンドウサイズの指定(size)

ウィンドウサイズを指定するにはsizeを利用する。括弧内に(幅, 高さ)のように指定することができる。

size(600, 600);

 

Runすると幅600pix、高さ600pixのウィンドウが立ち上がる。

 

②プログラミングの作法

プログラムは必ず半角英数で記述する。

カンマ(,)の後は、半角スペースを空ける。

命令の最後にはセミコロン(;)をつける。※つけないものもあるので注意。

 

③背景色の設定(background)

背景色にはbackgroundの命令を使う。括弧内の引数の数によって異なるカラーモデルで指定される。デフォルト(初期設定)では薄いグレーが設定されている。

 

<グレースケールで設定 0〜255で設定>

size(600, 600);
background(0); //黒

 

<RGBカラーモデル(Wiki)で設定>

size(600, 600);
background(255, 204, 0);  //黄

 

下図は、背景に黄色を設定した実行結果。

Back To Top

エラーへの対処

プログラムに不具合があるとコンソール(下画像黒いウィンドウ部分)にエラーが表示される。
エラーの原因は様々なものが考えられ、その原因に合わせた対処が必要となる。

<よくあるミス>
・単純なスペルミス、打ち間違い
・全角スペースや全角文字
・ファイルパスの間違い
・ライブラリの未インストール

下図の例では全角スペースが入力されていることによるエラー。プログラムの記述は半角英数で行わなければRunできずにエラーとなる。

Processingのバージョン3からはコーディング途中でも入力ミスであればコンソールにエラー表示(下図)されるのでわかりやすい。

Back To Top

図形を描く(line, rect, ellipse)

①図形を描く命令

Processingには図形を描くための命令がいくつか用意されている。ここでは、以下の3つを紹介する。

 

線を描く line(X1, Y1, X2, Y2);

 

矩形を描く rect(X, Y, 幅, 高さ);

 

楕円を描く ellipse(X, Y, 幅, 高さ);

 

②座標系

Processingの座標系は左上を原点とし、右下が正の向きとなる。Y軸の方向が数学とは逆になる。

 

③線を描く(line)

線の色の初期値は黒。

 

④矩形を描く(rect)

塗りの初期値は白。

 

⑤楕円を描く(ellipse)

 

⑥線の色(stroke)

色はRGBカラーモデルで指定。

 

⑦塗りつぶし(fill)

色はRGBカラーモデルで指定。

 

⑧塗りなし(noFill)

Back To Top

コメント

①コメント

コメントとは、プログラム内にメモを残すことができる記述方法。

//(ダブルスラッシュ, スラッシュ2つ)の後の記述はプログラムに影響しない。
Processingの設定を行っておけば、全角文字、日本語も使うことができる。

size(600, 600); //ウィンドウサイズ
background(255, 204, 0); //背景色
stroke(255, 0, 0); //線の色
noFill(); //塗りなし
ellipse(300, 300, 100, 100); //楕円を描く

下図の実行結果から、何も影響していないことがわかる。

 

②コメントアウト

例えば、以下のように命令文の前にダブルスラッシュを入れると、そのプログラムを無視して動作させることができる。一時的なプログラムの変更やデバッグ(プログラムのエラーを探す)作業などにも使われる。

size(600, 600); //ウィンドウサイズ
//background(255, 204, 0); //背景色
stroke(255, 0, 0); //線の色
//noFill(); //塗りなし
ellipse(300, 300, 100, 100); //楕円を描く

下図では、背景色がデフォルトの薄いグレー、塗りもデフォルトの白になっていることが確認できる。

Back To Top

setup関数とdraw関数

Processingではこれまで記述してきた命令文を列挙する記述方法の他に、setup()とdraw()を使った記述方法を行うことができる。下図のように初期化関数とメインループ関数から構成される記述方式は、C言語などの他のプログラミング言語においても一般的に用いられている手法である。

Processingにおけるメインループ関数は、初期設定で1秒間に60回ループする。このスピードのことをフレームレートと呼び、1秒に60ループする場合、フレームレートは60fps(frame per second)となる。

※プログラミングにおける関数とは、何らかの処理を行う命令をとらえる概念で、これまでに用いたsize()やellipse()も関数である。

 

下のコードは、setup()とdraw()を使わないこれまでの記述。

size(600, 600); //ウィンドウサイズ
background(255, 204, 0); //背景色
stroke(255, 0, 0); //線の色
noFill(); //塗りなし
ellipse(300, 300, 100, 100); //楕円を描く

以下は、同じ動作を行うものsetup()とdraw()を使った記述。

void setup() {
    size(600, 600); //ウィンドウサイズ
    background(255, 204, 0); //背景色
    stroke(255, 0, 0); //線の色
    noFill(); //塗りなし
}

void draw() {
    ellipse(300, 300, 100, 100); //楕円を描く
}

※プログラミング作法 関数内などでは行頭をインデント(字下げ)することで、プログラムの塊を視覚的にわかりやすく記述する。

Back To Top

変数

①変数

「変数」は数値や文字列を代入して用いることができるもので、パラメータの一括変更やアルゴリズムの構築などに利用できる。プログラミングには必要不可欠なものである。

以下は、前ページのコードの一部に変数を用いたもの。setup()関数の中のrの値を変更することで、描画する円の半径を変更することができる。setup()関数やdraw()関数の枠を越えて扱える変数をグローバル変数と呼び、プログラムの最初に宣言する必要がある。

int r; //整数型の変数を宣言

void setup() {
    size(600, 600); //ウィンドウサイズ
    background(255, 204, 0); //背景色
    stroke(255, 0, 0); //線の色
    noFill(); //塗りなし
    r = 100; //半径の初期値
}

void draw() {
    ellipse(300, 300, r, r); //楕円を描く
}

 

②変数の型

変数を使うためには、その変数をどんな種類のものにするかを決めて扱う必要があり、その種類のことを「型」と呼ぶ。Processingで扱える変数の型には様々なものがある。以下は一例。

int:整数
float :浮動小数点型(実数)
char :文字
color: 色

Back To Top

マウス座標の取得

①マウス座標の取得

マウス座標は、mouseXとmouseYで取得することができる。mouseXとmouseYのようなProcessing側で定義されている変数をシステム変数と呼ぶ。ユーザ側で変更することはできない。

以下のプログラムでは、マウス座標を円の中心座標に設定している。そのため、円がマウスの動きに追従して描画される。

int r; //整数型の変数を宣言

void setup() {
    size(600, 600); //ウィンドウサイズ
    background(255, 204, 0); //背景色
    stroke(255, 0, 0); //線の色
    noFill(); //塗りなし
    r = 100; //半径の初期値
}

void draw() {
    ellipse(mouseX, mouseY, r, r); //楕円を描く
}

実行結果は以下のようになる。描画したものはそのままでは消去されないまま残る。

 

②描画のリセット

①のプログラムのbackgroundをdraw()関数内移動することで、フレームが更新される毎(Processingではデフォルトで60fps)に背景を描画することになるため、前のフレームに描画された円が消去されてマウスに円がついてくる表現となる。関数などをsetupとdrawのどちらに入れるかで異なる実行状態になる。

int r; //整数型の変数を宣言

void setup() {
    size(600, 600); //ウィンドウサイズ
    stroke(255, 0, 0); //線の色
    noFill(); //塗りなし
    r = 100; //半径の初期値
}

void draw() {
    background(255, 204, 0); //背景色
    ellipse(mouseX, mouseY, r, r); //楕円を描く
}

実行結果は以下。

Back To Top

イージング(減速アニメーション)

下記は、前ページのプログラムにイージング(減速)のアルゴリズムを加えたもの。マウスの動きに少し遅れて円が追従する表現になる。

int r; //整数型の変数を宣言
float x; //不動小数点型の変数を宣言
float y;
float easing;

void setup() {
    size(600, 600); //ウィンドウサイズ
    stroke(255, 0, 0); //線の色
    noFill(); //塗りなし
    r = 100; //半径の初期値
    easing = 0.05; //イージングのパラメータ
}

void draw() {
    background(255, 204, 0); //背景色
    x = x + (mouseX - x) * easing; //イージングアルゴリズム
    y = y + (mouseY - y) * easing;
    ellipse(x, y, r, r); //楕円を描く
}

以下は、このアルゴリズムの原理を解説したもの。
例えば、下図のように移動後のマウスの位置と一定時間前の円の位置の移動量をそれぞれmouseX-x、mouseY-yとする。

下図は、easing = 0.5として、X方向のアルゴリズムx = x + (mouseX – x) * 0.5の時間経過を表したもの。

この原理によって、円の座標はマウスの座標に徐々に近づく。easingのパラメータによってその近づく早さを調整することができる。また、フレームレートによってもスピード感は変化する。

Back To Top

HSB(HSV)カラーモデル

①HSB(HSV)カラーモデル

カラーモデルにはRGBの他にHSBがある。RGBでは赤、緑、青の3つのデータで構成されていたが、HSBでは、色相(Hue)、彩度(Saturation)、明度(Brightness, Value)で構成される。HSBはHSVとも呼ばれる。

ProcessingではデフォルトでRGB設定となっており、HSBに変更するにはcolorMode()関数を用いる。

colorMode(HSB, 255);の255は、値の範囲を0〜255を指定するもの。また、これまでRGBではbackground(255, 204, 0)が黄色だったが、HSBではbackground(34, 255, 255)が黄色となる。実行結果は前回と同じ。

int r; //整数型の変数を宣言
float x; //不動小数点型の変数を宣言
float y;
float easing;

void setup() {
    size(600, 600); //ウィンドウサイズ
    stroke(255, 0, 0); //線の色
    noFill(); //塗りなし
    r = 100; //半径の初期値
    easing = 0.05; //イージングのパラメータ
    colorMode(HSB, 255); //HSBカラーモデル(値の範囲0〜255)を利用
}

void draw() {
    background(34, 255, 255); //背景色 HSB
    x = x + (mouseX - x) * easing; //イージングアルゴリズム
    y = y + (mouseY - y) * easing;
    ellipse(x, y, r, r); //楕円を描く
}

 

②Hue(色相)

HSBカラーモデルでは、Hue(色相)データを扱うことができ、Color wheel(色相環)の色変化を表現することができる。

以下のプログラムでは、円の線の色を徐々に変化させるもの。色の変化がわかりやすいように背景色は白に変更して、残像表現を行うためにsetupの中に移動した。

stroke(color(hue, 126, 255));で線の色の色相にあたる変数のみを変化させる。変数hueはif〜else文により無限ループで変化を続ける。

int r; //整数型の変数を宣言
float x; //不動小数点型の変数を宣言
float y;
float easing;
int hue;

void setup() {
    size(600, 600); //ウィンドウサイズ
    background(255); //背景色 HSB
    stroke(255, 0, 0); //線の色
    noFill(); //塗りなし
    r = 100; //半径の初期値
    easing = 0.05; //イージングのパラメータ
    colorMode(HSB, 255); //HSBカラーモデル(値の範囲0〜255)を利用
}

void draw() {
    stroke(color(hue, 126, 255)); //線の色
    x = x + (mouseX - x) * easing; //イージングアルゴリズム
    y = y + (mouseY - y) * easing;
    ellipse(x, y, r, r); //楕円を描く

    if (255 < hue) { //hueのループ変化
        hue = 0;
    } else {
        hue = hue + 1;
    }
}

実行結果は下図のようになる。

Back To Top

マウスクリックの判別

マウスのクリックはシステム変数mousePressedで判別することができる。以下は、前ページのプログラムをマウスを押したときのみ描画するように変更したもの。

int r; //整数型の変数を宣言
float x; //不動小数点型の変数を宣言
float y;
float easing;
int hue;
 
void setup() {
    size(600, 600); //ウィンドウサイズ
    background(255); //背景色 HSB
    stroke(255, 0, 0); //線の色
    noFill(); //塗りなし
    r = 100; //半径の初期値
    easing = 0.05; //イージングのパラメータ
    colorMode(HSB, 255); //HSBカラーモデル(値の範囲0〜255)を利用
}
 
void draw() {
    stroke(color(hue, 126, 255)); //線の色
    x = x + (mouseX - x) * easing; //イージングアルゴリズム
    y = y + (mouseY - y) * easing;
    
    if (mousePressed == true){
       ellipse(x, y, r, r); //楕円を描く
    } else {
       x = mouseX; //楕円位置Xのリセット
       y = mouseY; //楕円位置Xのリセット
    }
    
    if (255 < hue) { //hueのループ変化
        hue = 0;
    } else {
        hue = hue + 1;
    }
}

実行結果は下図。

 

 

Back To Top