小学校教員のためのプログラミング入門
図形を描く
Processing が得意なのはグラフィカルな表現です．今回は，次の図形を描くことを目標にして，Processing のプログラミングの基本について学びます．
表示ウィンドウのサイズと座標系
size によるサイズ指定
表示ウィンドウ（display window）とは，スケッチを実行した際に表示されるウィンドウのことです．何も指定しない場合，このウィンドウの大きさ（正確には描画が行われるクライアント領域と呼ばれる部分の大きさ）は100×100となります．このサイズの単位はピクセル（pixel）と呼ばれ，ディスプレイに表示される総画素数（たとえば1024×768など）の単位と同じです．
表示画面を任意の大きさに設定するには size メソッドを使います．メソッド（method）は関数（function）とも呼ばれます．size メソッドは組み込みメソッドと呼ばれるメソッドの一つです．Processing には前回のスケッチに含まれていた line や ellipse など様々な組み込みメソッドが用意されています．組み込みメソッドを組み合わせ並べていくことが Processing のプログラミングスタイルの基本となります．組み込みメソッドの一覧と使い方は http://processing.org/reference/ で閲覧することができます．
メソッドは
メソッド名( [パラメータ１[，パラメータ２ [，パラメータ３・・・] ] ] ) ;
のように表記します．ここで，鍵カッコ [ ] は省略可能を示すもので，実際に [ ] を書くという意味ではありません．メソッド名は半角英数字からなる文字列（識別子と呼びます）です．パラメータはメソッドの動きを指定する属性であり，後で説明する値を書きます．このパラメータの集合を独立変数（arguments），引数とも呼びます．
size メソッドは，
size( 横サイズ，縦サイズ [，描画モード] );
と 3 つのパラメータをとります．横サイズと縦サイズは表示ウィンドウの縦横の大きさであることは容易に想像できるでしょう．残るは描画モードです．描画モードには，JAVA2D, P2D, P3D, OPENGL, PDF のいづれかを書きます．省略することもでき，この場合には JAVA2D を書いたことになります．
描画モードに P2D と P3D を指定すると，それぞれ二次元，三次元のグラフィック描画が高速になります．OPENGL を指定すると，OpenGL という技術を用いたさらに高速な描画が行われるようになります．ただし，OpenGL に対応したコンピュータを利用する必要があります．また，二次元グラフィックスを高品質で印刷したい場合は PDF を指定します．なお，P2D, P3D, OPENGL を指定した場合は，線を描画するときのいくつかの属性が無視されてしまいます．遅くてもよいから正確な二次元グラフィックスを描画させたいというときには，JAVA2D を指定するとよいでしょう．
では，さっそく size 命令を使って，表示ウィンドウの大きさを変えてみます．次のスケッチを入力して実行してみてください．
size( 300, 300 ); line( 0, 0, 150, 150 );
size 命令を使わなかったときよりも大きなウィンドウが表示され，左上から中央まで線が引かれたと思います．
座標系
表示ウィンドウの座標系は左上が原点（0,0），右水平方向が X 軸正方向，下垂直方向が Y 軸性方向となります．
表示ウィンドウの中央に四角形を描いてみる
rect メソッドと rectMode メソッド
最初にいちばん外側の正方形として，一辺が 200 の四角形をウィンドウの中央に描いてみます．四角形を描くメソッドは rect で，書式は次の通りです．
rect( 左上X座標，左上Y座標，横幅，縦幅 );
また，関数 rectMode を利用すると，このパラメータの書き方を変えることができます．rectMode は，
rectMode( 描画モード );
として四角形の描画モードを設定できます．描画モードとして設定できるのは，CORNER，CORNERS，CENTER，RADIUS の 4 種類です．rectMode を利用して描画モードを変更しない場合は CORNER が設定されていることになり，この場合，先に記したパラメータの指定方法になります．CORNERS の場合は，四隅の座標を直接指定する方法になります．
rectMode( CORNERS ); rect( 左上X座標，左上Y座標，右下X座標，右下Y座標 );
CENTER の場合は中心座標と横幅と縦幅，RADIUS の場合は中心座標と縦幅の半分と横幅の半分を指定する方法になります．
rectMode( CENTER ); rect( 中心X座標，中心Y座標，横幅，縦幅 );
rectMode( RADIUS ); rect( 中心X座標，中心Y座標，横幅/2，縦幅/2 );
今回は一辺が 200 の四角形をウィンドウの中央に描くのですから，CENTER モードを利用するのが最適で，ソースコードと実行結果は次のようになります．
size( 300, 300 ); rectMode( CENTER ); rect( 150, 150, 200, 200 );
システム変数（システムプロパティ）
ここで，もし表示ウィンドウの大きさを変更したくなった場合，どうなるでしょう．size メソッドと rect メソッド両方のパラメータを変更しなければならなくなります．これはちょっと面倒です．そこで，rect メソッドを次のように書き換えてみても，先と同じ結果が得られます．
size( 300, 300 ); rectMode( CENTER ); rect( width/2, height/2, 200, 200 );
さらに，このようにすることで，size のパラメータを変更して表示ウィンドウの大きさを変えても，rect のパラメータを変える必要がなくなります．
この width と height はシステム変数（システムプロパティ）と呼ばれるもので，ウィンドウの横幅と縦幅を表す数値が格納されています．
変数（プロパティ）
システム変数は Processing が提供するものですが，プログラムの中で自由に値を格納しておく仕組みも提供されています．これが変数です．この後すぐにこの変数を利用しますので，ここで説明をしてしまいます．ただ，変数について説明する前に，値と式について先に説明しておきます．
値 には，数値，文字列，論理値などがあります．プログラムの中で扱うデータそのものが値と言ってよいでしょう．論理値とは真（true）か偽（false）だけを取る値です．先の四角形の横幅を示している 200 は数値です．なお，この 200 というように数値を表した表現を数値リテラルと呼びます．
式 とは Processing が評価をして値を生成するものです．もっとも簡単な式は値そのものです．そして，値を演算子で接続したものも式です．たとえば，3+5 や 2+3*4 は算術演算子を用いた式になります．ここで，たとえば加算演算子 + は，演算子の右側と左側の値を加えた値を生成します．よって 3+5 は 8 という値を生成する式になります．また，2+3*4 という式を評価する際は，演算子の優先順位順に評価が行われ，先に 3*4 が評価され，式は 2+12 に変換され，次に 2+12 を評価し，14 を生成します．なお * は乗算の演算子です．除算の演算子は / になります．この説明で気がついたと思いますが，スケッチの中では普通の四則演算の式と同じ表記をすることで，その四則演算の結果を生成することができるということです．
したがって，先の width/2 は width に格納されている表示ウィンドウの横幅を 2 で割った値を生成します．つまり，座標点 ( width/2, height/2 ) はウィンドウの中央の点の座標となります．
では，変数について説明します．変数 とは値を格納することができるもので，Processing によって評価が行われると，その格納されている値が生成されます．つまり，スケッチのソースコードで値を書くところに変数を書くことができるということです．
変数への値の格納には代入演算子 = を用います．代入演算子は右側の値を左側の変数に格納する演算子です．ちなみにその際，右辺の値を生成します．
x = 10; y = 10+4; z = x + y;
x や y，z が変数です．x = 10 は単純に x に 10 を格納します．y = 10+4 は右辺の 10+4 という式から生成される 14 が y に格納されます．z = x + y は，右辺の式 x+y が評価されますが，x には 10 が，y には 14 が格納されていますので，10+14 の評価値である 24 が生成され，その値が z に格納されます．
変数には任意に名前をつけることができ，変数名とよびます．上記の例では x, y, z と単純な名前がつけられていますが，半角英数字を組み合わしたもの（これを識別子と呼びます）をつけることができます．ただし，Processing で既に利用が定義されているもの（予約語と呼びます），たとえば先に出てきた Processing があらかじめ用意したシステム変数の名前を使うことはできません．
また，変数には型という概念があります．変数に入れられる値の種類を定めるものです．型には，boolean（論理値型），int（整数型），long（倍長整数型），float（実数型），double（倍精度実数型，byte（バイト型），char（文字型），color''（色型）があります．変数に値を代入する場合，異なった型の値を直接代入することはできません．その際には型変換という操作が必要になります．それぞれの型についての詳細，型変換については，実際に利用するときに説明することにします．
変数を利用する際には，その変数を利用するよという宣言をする必要があります．宣言は
型名 変数名; 型名 変数名, 変数名,・・・;
のように行います．また，次のように，宣言と同時に値を代入（初期値を設定）することも可能です．
int data = 10;
繰り返し正方形を描いていく
だんだん小さな正方形を描いてみる
もう最終目標の図形を描く方法は想像がつくでしょう．具体的には一片の長さを 20 づつ減らした正方形を描いていってみます．スケッチはつぎのようになります．
size( 300, 300 ); rectMode( CENTER ); rect( width/2, height/2, 200, 200 ); rect( width/2, height/2, 180, 180 ); rect( width/2, height/2, 160, 160 ); rect( width/2, height/2, 140, 140 ); rect( width/2, height/2, 120, 120 ); rect( width/2, height/2, 100, 100 ); rect( width/2, height/2, 80, 80 ); rect( width/2, height/2, 60, 60 ); rect( width/2, height/2, 40, 40 ); rect( width/2, height/2, 20, 20 );
一応これで完成なのですが，けっこう面倒です．もし，正方形を 100 個書くとなったらさらに面倒です．もっと楽な書き方はないのでしょうか？
while 文を用いた繰り返し正方形を描く
ここで while 文を用いることで，先のスケッチは次のように書き換えることができます．
size( 300, 300 );
rectMode( CENTER );
int length = 200;
while( length > 0 )
{
rect( width/2, height/2, length, length );
length = length - 20;
}
while 文は次のように用います．
while( 論理値 ) 処理文;
まず，論理値が true であると処理文を実行します．実行が終わると再び条件式を判定し，true であると再度処理文を実行し，偽であるとその繰り返し処理は終了します．また，複数の処理文を繰り返し実行したいときは，
while( 論理値 )
{
処理文;
処理文;
：
}
のように，処理分を中カッコ { } で囲みます．
条件式と比較演算子
while 文の括弧 ( ) の中には論理値を書くと書きましたが，通常はここに条件式を書きます．条件式は式の一つです．前回説明したとおり，式は値を演算子で結合したもので，条件式も同じ形です．ただ，式が生成する値は論理値で，条件が成り立っていることを示す true か成り立っていないことを示す false の二種類だけです．
条件式を構成する演算子が条件演算子で，同値（==），異値（!=），大小（>,<）があります．たとえば，
3 == 3 2+1 != 2 3 > 1+1 'abc' == 'abc'
は成り立つので true が生成されます．また，
3 == 5 2 != 2 3 > 5+1 'ABC' == 'abc'
は成り立たないので false が生成されます．先のスケッチで利用した
lenght > 0
は，変数 length に格納されている値が 0 より大きいときは成り立つので true が生成され，0 以下のときは成り立たないので false が生成されます．そのため，length が 0 以下になると，while による繰り返し処理が終了するわけです．
ここで，複数の条件式を組み合わせて，一つの条件式にすることもできます．これには && と || を使います．&& で結合された場合，両方の条件式が成り立てば true が生成されます．|| で結合された場合，どちらかの条件式が成り立てば true が生成されます．たとえば，
2 == 2 && 3 != 2 2 == 2 || 3 != 3
は成り立つので true が生成されます．また，
2 == 2 && 3 != 3 2 == 3 || 3 != 3
は成り立たないので，false が生成されます．
スケッチ解説
では最後に，目的を達成したスケッチの解説を行います．
size( 300, 300 );
rectMode( CENTER );
int len = 200;
while( len > 0 )
{
rect( width/2, height/2, len, len );
len = len - 20;
}
len は描く正方形の一辺の長さを表す変数です．一辺の長さは今回は整数で十分です．整数を格納する変数の型としては int 型か long 型があります．int 型はデータ長が 32 ビットで,147,483,647 から -2,147,483,648 を扱える型で，'''long 型はデータ長が最低でも 64 ビットあり，9,223,372,036,854,775,808 から 9,223,372,036,854,775,807 までの整数を扱うことができます．ここではせいぜい3,4桁の整数が使えれば十分なので，int 型を利用します．変数の宣言と同時に，初期値として 200 を代入しています．
while 文は，この len が 0 より大きい間繰り返すように条件式が設定されていて，この中で，表示ウィンドウの中心に一辺が len の正方形を描いています．そして，len から 20 を引いたものを len に代入します．結果として，一辺が 200，280，．．．，40，20 の正方形を描き，目的とした図形を描くことになります．
演習課題
次のような図形を描くスケッチを作成しなさい．スケッチには while 文による繰り返しを利用してください．
スケッチ名は半角英数字で 学籍番号_K3 とし，WebClass を利用して pde ファイルを提出してください．