processingで簡単な図を描く(前編)

1.1 Processingの環境をつくる

まずは、processingを動かしていくための環境をつくる。といっても、processingをダウンロードして動かすだけ。

　1. サイト(https://processing.org/)よりダウンロードし解凍する。

　2. 解凍したフォルダ内のprocessing.exeを起動する(図１)。

図１

processingでは、①エディタ部分にコードを書き、②再生ボタンを押して動かす。結果はファイルやコンソールに出力できる(図２)。

図２　processing.exeを起動したときの画面構成

1.2 描画のルール

数値や文字列はコンソールなどに出力するが、processingの強みは計算結果に基づいて様々な図形を描画したり、絵を描いたり、操作するための画面をつくったりできることである。

これらを行うおこなうためには、まず描画をするためのウィンドウを作る必要がある。ウィンドウは下のようなコードでつくることができる。

size(500, 500);     //size(x_size, y_size);
background(255);

実行結果

上記のコードを実行すると、幅が500, 高さが500の、背景が白色のウィンドウを作ることができる。

size(x_size, y_size)のx_sizeがウィンドウの幅を、y_sizeがウィンドウの高さを決めている。background(c)は背景の色を決める部分で、cの中には色を指定する値を入れることができる(白黒の場合は0～255の整数を入れる。詳細は別記事)。

なお、”; (セミコロン)”は多くのプログラミング言語で区切りを入れるために用いられる。これをうっかり入れ忘れてsize(x, y) background(c)というようにすると、コンピュータはどこで一区切りして良いかわからないため、きちんと動作しない(よくあるミス)。

セミコロンが入って入れば、実は改行する必要もなく、size(x, y); background(c); というように一行にまとめて書いてもよい。