Processing まとめ１

先日（6/12）の授業：Processingのプログラミング演習のまとめ。
Processingの基本的な使い方については「建築発明工作ゼミ2008」にもまとめてありますので参考にしてください。
「Processing のダウンロードとインストール」--Processingのセッティング。
「Processing の基本操作　その１」--プログラムの仕方。
「Processing の基本操作　その２」--図形の描画。
「Processing の基本操作　その３」--図形を動かす。
「Processing 　マウス入力１」--マウスボタン／クリック。
「Processing 　マウス入力２」--マウスに合わせて図形を動かす／図形をドラッグする。
「Processing 　マウス入力３」--図形の上にマウスが重なると色が変わる／ロールオーバー。
「Processing 　マウス入力４」--トグルボタン／フラグ／３回押すとオンになるスイッチ。
「Processing 　文字と画像」--文字（フォント）の表示方法、画像の取り込みと表示方法。

まずは図形の描画から開始しますが、基本的には数値入力で図形のサイズや位置を決定して描画させます。
座標の原点(0,0)は表示画面の左上で、X座標は右へ行くほど値が大きくなり、Y座標は下へ行くほど値が大きくなります。
尚、プログラムは原則的に上の行から下の行へと処理されます。

（１）基本的な図形描画

size(400,300);        //表示画面サイズを指定する。幅400、高さ300ピクセルの画面。
rect(10,20,30,40);    //矩形描画（長方形や正方形）。座標(10,20)に幅30、高さ40の長方形を描画。
ellipse(x,y,w,h);     //楕円、円描画。座標(10,20)に幅30、高さ40の楕円を描画。
point(x,y);           //点描画。座標(x,y)に点を打つ。
line(x1,y1,x2,y2);    //線描画。座標(x1,y1)から(x2,y2)へ線を引く

（２）線や塗面の変更

fill(r,g,b);         //図形の塗面の色指定。
noFill();       //塗面なし
stroke(r,g,b);       //図形の外形線の色指定。
noStroke();     //外形線なし。
strokeWeight(t); //外形線の太さ指定。

（３）色について
fill()やstroke()の括弧内に入れる色の値は0~255の256段階で、rgb（赤緑青）の三つの値で指定。
fill(255,255,0);//この場合黄色。
括弧内に一つの値を入れた場合は無彩色（黒〜グレー〜白）になる。
fill(0); //黒
fill(255);//白

（４）繰返し処理：for()
for()を使うことで、複数の図形を描画させることができます。

for(int i=1; i<=10; i=i+1){
  rect(i*10,10,5,5);
}

上記は5ピクセルの正方形を10個描きます（10回分の繰返し処理）。
for()の括弧内の「int i=1; i<=10; i=i+1」は、1から始まって10まで+1ずつ繰り返し処理するという意味です。
for()の括弧内の「i<=10」を「i<=15」にすれば15回繰返し処理します。
「i=i+1」は、繰返し処理させるときに1から10までを1ずつ増加させて処理するということです。
「i=i+2」にすれば、1から10までの範囲を2,4,6,8,10というように2ずつ増加させて処理します（合計5回繰り返し処理）。
「i=i+3」であれば、1から10までの範囲を3,6,9というように3ずつ増加させて処理します（合計3回繰り返し処理）。
また「i=i+1」を「i+=1」や「i++」と書くこともできます。「i=i+2」は「i+=2」と書くこともできます。
「int」は整数を使うという指定です。ちなみに小数を使う場合は「float」になります。このように、扱う値が整数値か小数値かの違いも指定しなければいけません。説明は以下。

（５）計算式
足し算は「+」：3+4=7
引き算は「-」：3-4=-1
かけ算は「*」：3*4=12
割り算は「/」：12/3=4
割り算の余りは「%」：10%3=1、12%3=0

（６）変数

int a=50;
rect(10,20,a,a);
ellipse(30,40,a,a);

上記のようなプログラムを書くと、任意に用意したaという変数を50に設定しておき、その後はaが50という値で矩形と円のサイズに代入されます。はじめの「a=50」を「a=100」に変更すれば、矩形と円のサイズも一気に変えることができます。
その他、リアルタイムに変化する値（計測中の温度、マウスの位置など）をプログラムに取り入れる場合に変数を使うと便利です。

（７）整数と小数
変数を用いるときには、プログラム上では整数値を扱うのか、小数値を扱うのかを指定しなければいけません。整数の場合は「int」、小数の場合は「float」を用います。
int a;
a=10;
とすれば、aに入る数値は整数のみに限定されます。以下のように整数の変数に小数を入れるとエラーになります。
int a;
a=10.5;//エラーがでるので不可。

例えば以下のように
int a=10;
に設定しておくと、
a/3=3
になります。
float a=10;
にすれば、
a/3=3.3333333
になります。
あるいは、整数の計算の場合は小数が切り捨てられるので、
10/3=3
になりますが、10か3を10.0や3.0にすると小数の計算になります。
10.0/3=3.3333333
10/3.0=3.3333333
また、10や3の後ろに10fや3fというようにfをつけると小数の計算になります。
10f/3=3.3333333
10/3f=3.3333333

（８）コメント
「//」ダブルスラッシュをプログラム中に付け足すと、同じ行の「//」以降の文字はグレー表示され、ちょっとしたメモや、一次的にその行をプラグラム上無効にしたい場合につかいます。

rect(10,20,30,40);//長方形描画
//ellipse(10,20,30,40);

上記の「//長方形描画」の部分や「//ellipse(10,20,30,40);」はプログラム上無効化されます。

（９）動画／アニメーション
描画した図形を動かすには、

void setup(){
  //ここに初期設定を書く
}
void draw(){
  //ここに図形描画などの処理を書く
}

上記のようなフォーマットを用意し、表示画面サイズなどの初期設定をvoid setup(){...}内に書き、background()やrect()などの描画処理をvoid draw(){...}内に書きます。

int x=0; //X座標用の変数xを用意し、とりあえず0を代入しておく。
void setup(){
  size(400,300);//表示画面を400x300ピクセルに設定
}
void draw(){
  background(0);//背景を黒に設定
  rect(x,100,30,30);//30ピクセル角の正方形を描画
  x=x+1; //正方形のX座標用の変数xを1ずつ増加
}

上記は正方形が右に1ピクセルずつ移動していくプログラムです。

その他サンプルについては以下を参照してみてください。
「Processing の基本操作　その３」--図形を動かす。