時間が経過すると表示位置が変わるプログラムを書く
時間が経過すると、表示された図形の大きさと、描画位置が変わるプログラムを作成します。
この記事では、以下の3点を説明します。
表示の初期設定
「図形を描く」の記事でプログラムを作成するときには、ただ命令を書くだけでした。
Processingで「時間が立つと表示画面が変化」したり、「表示画面をクリックしたときに変化が起きる」ようなプログラムを作成したときは「関数」を使います。
「関数」とは、複数のプログラムの命令を一つのプログラムの命令にまとめるためのプログラムの記述方法です。
Processingでは、画面に表示される最初の設定の関数の他、クリックしたときに動作させる関数や時間で動作する関数など様々な関数が用意されています。
関数の設定は「void」から始まります。初期設定のための関数は以下の記述です。
void setup(){ ... }「図形を描く」の記事で作成した図形を、初期設定の関数の中に記述すると以下のようになります。
void setup(){
size(200,200);
rect(10,10,60,60);
}初期設定の関数は、Processing実行時の最初の状態を設定するのに使います。
今回は以下のように設定します。
アニメーション部分の作成（時間経過で図形の表示位置を変化させる）
時間経過で表示内容を変えるには、次のような関数を使います。
では、Processingで四角を表示するプログラムを作成します。
プログラムを入力する欄に以下の四角を作成する命令を記述します。
rect(四角の左上のx座標,四角の左上のy座標,四角の右下のx座標,四角の右下のy座標);ドキュメントのサイズを幅200ピクセル、高さ200ピクセルを変更し、その中に四角を表示する以下のプログラムを記述します。
size(200,200);
rect(10,10,60,60);実行ボタンを押すと表示するドキュメントサイズが200ピクセル四方に変わり、その中に、四角が描かれます。
Processingでは、四角、円、三角、点、線やベジェ曲線を使った図形等、ひと通り描くための命令が用意されています。
図形への彩色
先ほど作成した四角形に色をつけます。
図形の「線分の部分」と「面の部分への塗り」の色を指定することができます。
線分については、線分の太さ、形状を指定できます。
先ほどの命令に、以下の面の部分への色（塗り）を行う命令を記載します。
面の部分への塗りの命令は以下の命令です。
ここでは次の命令を追記します。
fill(#ff0000);
「実行ボタン」を押すと次のようになります。
次に、図形を描く境界線に線を設定します。
次のような命令をプログラムを記述します。合わせて背景色も設定しています。
実行すると次のようになります。
同じ図形でも色や境界線の色が変わっただけでも違うものに見えます。
Processingを保存する
「保存」を押してファイルを保存します。
作成したProcessingのファイルは、基本、ドキュメントフォルダ（OS Xでは書類フォルダ）に作成される「Processing」フォルダに保存されます。
あとでわかる名称をつけて保存してください。
図形を描く命令について詳しくはリファレンスを参考にしてください。
