![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
次のスケッチでは、最初にvoid setup()に続く{ }内のコードが1回だけ実行され、その後はvoid draw()に続く{ }内のコードが繰り返し実行された。
void setup(){
size(400,400);
} void draw(){
circle(mouseX, mouseY, 20);
}
このスケッチではマウスのポインタの位置(mouseX, mouseY)に〇が描かれていた。一度描いた〇は消えないので、マウスが動いた軌跡が描かれる。次のように、background(64);を加えてみよう。これは画面をグレーで塗りつぶす。
void setup(){
size(400,400);
} void draw(){
background(64); circle(mouseX, mouseY, 20);
}
これで、ポインタの位置に〇が描かれることがわかる。 このように、drawの最初に画面を消去することで、〇が動いているように見えるだろう。 background()で背景を塗りつぶす代わりに、rect(0,0,width,height)で画面いっぱいの長方形を描いてもよい。この場合は、塗りつぶす色を指定するとともに、〇を描くときの色を再指定しないと、何も描かれていないように見えてしまうだろう。
【プログラム A】 void setup(){
size(400,400);
} void draw(){
fill(0); rect(0,0,width,height); fill(255); circle(mouseX, mouseY, 20);
}
今度はマウスを追いかけるのではなく、左から右へ動かしてみよう。それには、どこに〇を描くかを記憶させておく必要がある。そこで、〇を描く場所の座標を変数x, yとして、x座標を少しずつ増やしていけば、このような動作が実現することがわかる。
float x, y;
void setup(){
size(400,400); x = 0; y = height / 2;
} void draw(){
background(64); circle(x, y, 20); x = x + 2;
}
このままだと、右端まで行くと〇は戻ってこない。そこで、端に到達したら向きを逆転するように変更する。そのためには、xの増減を表す変数dxを追加して、端についたらその値を切り変える。このようなことを実現するためのコードは条件分岐という。proessingの条件分岐はifを用いて次のように記述する。
if(条件){ 条件が真のときに実行するコード } else { 条件が偽のときに実行するコード }
例えば、 if( x<0 ) { dx = 2; } は、変数xの値が負であれば、dxに2を代入し、そうでなければ何もしないことを表す。
float x, y, dx;
void setup(){
size(400,400); x = 0; y = height / 2; dx = 2;
} void draw(){
background(64);
circle(x, y, 20);
if( x < 0 ) { dx = 2; }
if( x > width ) { dx = -2; }
x = x + dx;
}
条件には、等式または不等式を記す。等号は=を2つ並べることに注意。条件には「または」を表す ||、「かつ」を表す &&、「…でない」を表す ! などを用いて複数の条件を記すこともできる。したがって、上のスケッチは次のように書き換えることができる。
【プログラム B】 float x, y, dx;
void setup(){
size(400,400); x = 0; y = height / 2; dx = 2;
} void draw(){
background(64);
circle(x, y, 20);
if( x < 0 || x > width ) { dx = -dx; }
x = x + dx;
}
何も指定しなければ、void draw(){}は1秒に60回実行される。この回数をフレームレートという。frameRate()関数を用いるとフレームレートを変更できる。次の例ではフレームレートを1秒当たり20に設定しているので、今までよりも動きがゆっくりになる。
float x, y, dx;
void setup(){
size(400,400); x = 0; y = height / 2; dx = 2; frameRate(20);
} void draw(){
background(64);
circle(x, y, 20);
if( x < 0 || x > width ) { dx = -dx; }
x = x + dx;
}
【課題】 プログラムAで、試しにfill(0)をfill(0,10)に変えてみよう。さらにfill(0,10)の後ろの10の値を変えてみよう。どうなるか、なぜそうなるかも考えること。
プログラムBを変更して、斜めに動くようにせよ。上下端で反射するようにすること。新たな変数dyが必要であろう。
