はじめて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ダウンロードページに行きます
2.該当するProcessingパッケージをダウンロードします
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が立ち上がります。
このようなウィンドウが立ち上がれば準備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が増加するような定義になっています。
また、注意が必要な点としてはもうひとつ、それぞれの行末についているゼミコロン;
を忘れないでください。
このセミコロンを書き忘れると、コードがエラーになってしまいます。
実際、私はあまりに頻繁にこのセミコロンを書き忘れるので、エラーが起きたときはすぐにセミコロンの書き忘れを確認する癖がついてしまいました。
さて、それではさっそくコードを実行してみます。
Processingエディターの左上にある再生ボタンを押せば、コードが実行されます。 次のような、(上端が少し見切れている)美しい円が出力されたでしょうか。
無事出力されれば、はじめての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)、x
とy
をこのプログラムで使うことを宣言しています。
変数とは、数を格納しておく箱のようなもので、以後このプログラムの中ではこれらに値を代入したり、足し算引き算などの演算を行うことが出来ます。
今回はこの変数x
とy
を、円を描写するxy座標として使います。
次は、setup
とdraw
という2つの関数を見ていきます。
void setup(){ // 関数内の処理 } void draw(){ // 関数内の処理 }
関数とは、ざっくり言えば一連の処理をまとめたものです。
setup
とdraw
それぞれの中に書かれた処理が、それぞれの関数のくくりで実行されます。
そしてこのsetup
とdraw
という関数は、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;
変数に値を代入しています。
前に書いた通り、今回は変数x
とy
を円を描画する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座標を指定する引数には、あらかじめ定義していた変数x
とy
を渡しています。
ellipse(x座標, y座標, 幅, 高さ)
x += 150;
肝心なのがこの処理です。
変数x
に150
を加算しています。
これをdraw
関数に記述することで、、フレームごとにx
が加算され、楕円のx座標が増加、つまり描画する円が右に移動していきます。
さて、コードの解説は以上です。
さっそく実行してみます。
灰色の円が左から右へと描画されていき、なんだか可愛気のある絵が出来上がりました。
さらにコードを工夫していけば、もっと美しい絵を描くことが出来るでしょう。 しかし今回は一旦これで満足して、次はこの絵を保存するやり方を見ていきます。
出力画像を保存する
Processingの出力は、当然ながらプログラムを終了させれば消えてしまいます。
せっかくの作品を大事にとっておくため、出力を保存してみましょう。
ありがたいことに、Processingは保存のための関数を用意してくれています。
主要な関数は、save
とsaveFrame
です。
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による実践ガイド [普及版]ジェネラティブ・アート―Processingによる実践ガイド](https://m.media-amazon.com/images/I/41Eq81vSVPL.jpg)
[普及版]ジェネラティブ・アート―Processingによる実践ガイド
- 作者:マット・ピアソン,Matt Pearson
- 発売日: 2014/11/21
- メディア: 単行本(ソフトカバー)
おわりに
それでは、以上で記事を終えます。
実のところ、私もProcessingを始めたのはつい数週間前のことでして、まだまだ歩き始めたばかりの初心者です。
初心者としての経験をもとに、同じ立場の方に向けてこのチュートリアル記事を書きました。
誰かの役に立てば幸いです。