BioErrorLog Tech Blog

試行錯誤の記録

Processingの始め方 | チュートリアル

はじめてProcessingを触る方に向けて、Processingの始め方をチュートリアル形式で書いていきます。

Processingの環境構築から、出力した作品を画像ファイルとして保存する方法までを辿っていきます。


はじめに

おはよう。@bioerrorlogです。

最近、Processingというプログラミング言語を使って絵を描きはじめました。

自分の手に筆を持って描くのではなく、コードを叩いて絵を描画するというのは、絵心に欠ける私にも簡単で、何より楽しいものです。 www.bioerrorlog.work

同じようにProcessingを使って何かをしてみたいという方にむけて、Processingの始め方を、私の経験をもとに書き残していきます。


Processingの始め方

Processingとは

Processingとは、公式サイトによると、

Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts.

Processingはビジュアルアートのためのプログラミング言語」という感じです。

アート向けといっているだけあって描画のための機能があらかじめ多く備わっており、プログラミングの知識がなくてもすぐに絵を描き始めることができます。

そのため、絵を描きたい方にだけでなく、プログラミングを未経験から始めたいけどどこから手を付ければいいかわからない、という方にもProcessingはおすすめです。 Processingコードの文法は直感的にわかりやすく、何よりコードの実行結果が視覚的にすぐ返ってくるからです。

自分の書いたコードの実行結果が視覚的にすぐ得られると、プログラミングを楽しみやすいかと思います。
(ほかの言語でプログラミングを始めた場合、おそらく一番最初にやるのは変数の代入や演算子の使い方などになるでしょう。 正直、それを楽しいと感じられる方は少ないのではないでしょうか。)

では、さっそくProcessingをインストールしていきます。


Processingのインストール

1.公式サイトからProcessingダウンロードページに行きます

f:id:BioErrorLog:20191215115830p:plain


2.該当するProcessingパッケージをダウンロードします

f:id:BioErrorLog:20191215120036p:plain

Windowsの場合、64-bitと32-bitの2つのバージョンがあります。 これは自身のPCに入っているWindowsに合わせて選ぶ必要があります。
Windowsが64-bitなのか32-bitなのかを調べるには、

  • Windows10の場合:
    1.Windowsボタンから「設定(歯車ボタン)」をクリック
    2.「システム」をクリック
    3.左のタブから「バージョン情報」をクリック
    4.「デバイスの仕様」のなかの「システムの種類」から64 bitか32ビットかを確認

  • それ以外(Windows8や7)の場合:
    こちらを参考に: Microsoftサポート


3.Processingパッケージを展開します

Processingパッケージをダウンロードしたら、それをどこかに展開すればProcessingを使う準備は完了です。
ダウンロードしたProcessingパッケージ(zipファイル)を右クリック -> "すべて展開"を選べば、ファイルを展開することが出来ます(展開する場所はどこでも大丈夫です)。

展開されたファイルの中に"processing.exe"があるので、それをダブルクリックするとProcessingが立ち上がります。

f:id:BioErrorLog:20191215125220p:plain

このようなウィンドウが立ち上がれば準備O.K.です。


はじめてのProcessing

さっそく、なんか書いていきましょう。
例えば、次のようなのものはいかがでしょうか。

size(1920, 1080);
ellipse(1000, 500, 1000, 1000);

たった2行のシンプルなコードです。

1行目size(1920, 1080);は、出力するウィンドウのサイズを指定しています。
括弧内の2つの数字 (引数と呼ばれます) は、size(幅, 高さ)を指定しています。

今回は私が好きな1920x1080のサイズにしてみました(私のPCのディスプレイサイズです。 このサイズで出力すると、気に入ったものをPCの壁紙にするのに丁度よいのです)。

2行目ellipse(1000, 500, 1000, 1000);はellipse(楕円)を描画するためのコードです。
引数はそれぞれ、ellipse(x座標, y座標, 幅, 高さ)を指定しています。

ここで、Processingにおけるxy座標には少し注意が必要です。 Processingでは座標の原点は左上となっており、右に行くにつれてxが増加、下に行くにつれてyが増加するような定義になっています。

f:id:BioErrorLog:20191229181351p:plain
Processingにおけるxy座標の例


また、注意が必要な点としてはもうひとつ、それぞれの行末についているゼミコロン;を忘れないでください。
このセミコロンを書き忘れると、コードがエラーになってしまいます。 実際、私はあまりに頻繁にこのセミコロンを書き忘れるので、エラーが起きたときはすぐにセミコロンの書き忘れを確認する癖がついてしまいました。


さて、それではさっそくコードを実行してみます。

Processingエディターの左上にある再生ボタンを押せば、コードが実行されます。 次のような、(上端が少し見切れている)美しい円が出力されたでしょうか。

f:id:BioErrorLog:20191229184524p:plain

無事出力されれば、はじめてのProcessing作品の制作は成功です。

つぎは、この簡単なコードを発展させて、もっといい感じの絵に仕上げていきます。


もっといい感じのProcessing

それでは、コードにもう少し手を加えていきます。

例えば、次のようなのはどうでしょう。

int x;
int y;

void setup(){
    size(1920, 1080);
    background(255);

    fill(0, 100);
    noStroke();

    frameRate(5);
    
    x = 0;
    y = height / 2;
}

void draw(){
    ellipse(x, y, 300, 300);
    x += 150;
}

先ほどの2行のコードに比べれば少し長くて複雑ですが、ひとつひとつ見ていきますので安心してください。


まずは冒頭のこちら。

int x;
int y;

これは、変数の宣言です。
2つの整数(int)、xyをこのプログラムで使うことを宣言しています。
変数とは、数を格納しておく箱のようなもので、以後このプログラムの中ではこれらに値を代入したり、足し算引き算などの演算を行うことが出来ます。

今回はこの変数xyを、円を描写するxy座標として使います。


次は、setupdrawという2つの関数を見ていきます。

void setup(){
    // 関数内の処理
}

void draw(){
    // 関数内の処理
}

関数とは、ざっくり言えば一連の処理をまとめたものです。 setupdrawそれぞれの中に書かれた処理が、それぞれの関数のくくりで実行されます。

そしてこのsetupdrawという関数は、Processingによってあらかじめ定義されたタイミングで実行される関数です。

setup関数は、プログラムが起動されたときに一度呼び出される関数です。 主に、初期状態やモデルの設定を定義する処理をここに書いておきます。

draw関数は、プログラムの実行中に繰り返し呼び出される関数です。 このそれぞれの繰り返しはフレームと呼ばれ、描画処理をここに書いておけばフレームごとに変化するアニメーションが出力されます。

つまり、プログラムの流れとしては、

実行ボタン -> setup -> draw -> draw ->・・・-> 停止ボタン

となります。


さて、大まかな流れが分かったところで、一つ一つの処理内容を見ていきます。

まずはsetup関数に書かれている処理からいきます。


size(1920, 1080);

これは前章でも使いましたが、出力するウィンドウサイズを指定しています。
size(横幅, 高さ);


background(255);

背景の色を指定しています。
0 - 255 (黒 - 白) の間で値を指定しています。
(もちろん、もう少し複雑な定義をすれば様々な色や透明度を指定できますが、今回は単純に一つの引数でグレースケールを定義しています)
background(グレースケール);


fill(0, 100);

図形の色を指定しています。
この後、ellipse関数で円を描画していきますが、その円の色を定義しています。 2つ目の引数100は透明度を指定しており、図形を透明にすることによって重ね合わせを綺麗に出力できるようにしました。
(透明度は、0 - 255 ( 薄い - 濃い )で指定できます)
fill(グレースケール, 透明度);


noStroke();

図形の外周線を描画しないことを指定しています。
noStroke関数を呼んでおくことで、ellipse関数で円を描画したときにその円の淵に線を引かないようにします。


frameRate(5);

フレームレートを指定しています。
先ほど、draw関数はsetup関数を呼び出した後に繰り返し実行されると書きましたが、どのくらいの頻度でdraw関数を呼び出すか(これをフレームレートといいます)を指定できます。
frameRate関数に渡す引数によって、1秒間に何回draw関数を呼び出すかが指定されます。
frameRate(フレームレート);


x = 0;
y = height / 2;

変数に値を代入しています。
前に書いた通り、今回は変数xyを円を描画するxy座標として使っていきます。
x = 0;は、初期状態としてxに0を代入し(x座標の0は左端を意味していることを思い出してください)、
y = height / 2;は、yを出力ウィンドウの高さの半分に指定しています。

heightという変数はProcessingによってあらかじめ決められた変数で、出力ウィンドウの高さが自動で格納されています。
似たような変数にはwidthというものもあり、これは出力ウィンドウの横幅が自動で格納されています。
絵を描画するのに便利なこのような機能が多く提供されているのは、Processingのうれしいところです。


[関連記事] Generative Art 自作品まとめ - Processing


さて、次はdraw関数の中身を見ていきます。

ellipse(x, y, 300, 300);

前章で紹介したように、楕円を描画するためのコードです。
これをdraw関数に記述すると、フレームごとに楕円が描画されます。
xy座標を指定する引数には、あらかじめ定義していた変数xyを渡しています。
ellipse(x座標, y座標, 幅, 高さ)


x += 150;

肝心なのがこの処理です。
変数x150加算しています。
これをdraw関数に記述することで、、フレームごとにxが加算され、楕円のx座標が増加、つまり描画する円が右に移動していきます。


さて、コードの解説は以上です。
さっそく実行してみます。

f:id:BioErrorLog:20191230142227p:plain

灰色の円が左から右へと描画されていき、なんだか可愛気のある絵が出来上がりました。

さらにコードを工夫していけば、もっと美しい絵を描くことが出来るでしょう。 しかし今回は一旦これで満足して、次はこの絵を保存するやり方を見ていきます。


出力画像を保存する

Processingの出力は、当然ながらプログラムを終了させれば消えてしまいます。
せっかくの作品を大事にとっておくため、出力を保存してみましょう。

ありがたいことに、Processingは保存のための関数を用意してくれています。

主要な関数は、savesaveFrameです。


save関数は非常にシンプルです。
例えば次のように引数に保存するファイル名を指定すれば、画像ファイルを保存することが出来ます。

save("sample_name.png");

この例ではPNG(.png)画像で保存されていますが、ほかにも保存できるファイル形式としては、TIFF (.tif)、TARGA (.tga)、JPEG (.jpg)があります。

保存場所は、スケッチフォルダーの中になります。
スケッチフォルダーは、Processingエディタのツールバーの「スケッチ」から、「スケッチフォルダーを開く」で開くことが出来ます。

このスケッチフォルダーは後から見つけ出すのが面倒くさいので、気に入った出力画像ファイルはどこか自分のわかりやすい場所に移しておくことをお勧めします。

このsave関数は、自分の好きなタイミングで呼び出せるようにしておけばより使い勝手が上がります。
例えば次のようにしておけば、好きなタイミングでキーボードのキーを押し、そのタイミングで画像を保存することが出来ます。

void keyPressed(){
    if (keyCode == ENTER){
        save("sample_name.png");
    }
}

keyPressed関数は、プログラム実行中にキーが押下されたときに呼び出される関数です。
上の例では、ENTERキーが押されたときにsave関数が呼び出されるようになります。
これで、プログラムの経過を観察しながら、お好みのタイミングで保存ができます。


saveFrame関数は、フレームごとに画像を保存することが出来る関数で、出力結果を動画にしたい時などに便利です。
使い方はsave関数とほとんど一緒ですが、一点だけ、保存ファイル名に####のようにシャープを含める必要があります。

saveFrame("sample_name_####.png");

この####にはフレームカウント(今何番目のフレームか)が代入されます。

saveFrame関数をdraw関数に書いておけば、プログラムの開始から終了まですべてのフレームを保存することが出来ます。
keyPressed関数に入れておけば、自分の好きなタイミングでフレームを保存することが出来ます。

自分の用途に合わせて、好きなやり方で自由に保存してみてください。


以上で、今回のチュートリアルを終わります。
最後に少しだけ、この後どんなことをするといいのか、について私の感想を書き残したいと思います。


次は何をすればよいか?

まずは、自分で思うままにコードを書いてみることをお勧めします。

Processingでどのような関数が用意され、引数にはどのような意味があるのかは、ProcessingのAPIリファレンスにすべて書いてあります。
英語で書かれていますが、シンプルな文章なので是非目を通してみてください。
気ままにコードを書きながら、あれこれと遊んでるうちに少しずつProcessingにも慣れてくると思います。


ある程度慣れてきたら、ほかの人の作品を眺めてみるのもいいと思います。

OpenProcessingでは、大量の作品とそのProcessingコードを見ることが出来ます。

redditのProcessing板generative板でも、美しい作品が毎日投稿されています。

またよろしければ、私の作った作品もぜひ参考にしてみてください。 すべてソースコードも公開しています。


まとまった解説が見たければ、書籍を読むのもいいと思います。

私は、マット・ピアソンの「ジェネラティブ・アート - Processingによる実践ガイド」を読みました。
コードの解説だけでなく、背景にある哲学が気さくに語られていて、とても読みやすく楽しい本でした。


おわりに

それでは、以上で記事を終えます。

実のところ、私もProcessingを始めたのはつい数週間前のことでして、まだまだ歩き始めたばかりの初心者です。

初心者としての経験をもとに、同じ立場の方に向けてこのチュートリアル記事を書きました。

誰かの役に立てば幸いです。