#author("2019-05-21T23:54:45+09:00","default:qua","qua")
#author("2019-05-21T23:57:21+09:00","default:qua","qua")
* 2-1 アクティブなスケッチ [#b4b938c2]
次のスケッチでは、最初にvoid setup()に続く{   }内のコードが1回だけ実行され、その後はvoid draw()に続く{   }内のコードが繰り返し実行された。 
 
void setup(){ 
    size(400,400);  
} 
void draw(){ 
    circle(mouseX, mouseY, 20); 
} 
 

 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); 
} 
 

 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); 
} 
 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; 
 
今度はマウスを追いかけるのではなく、左から右へ動かしてみよう。それには、どこに〇を描くかを記憶させておく必要がある。そこで、〇を描く場所の座標を変数x, yとして、x座標を少しずつ増やしていけば、このような動作が実現することがわかる。 
 void setup(){ 
   size(400,400); 
   x = 0; 
   y = height / 2; 
 } 
 void draw(){ 
   background(64); 
   circle(x, y, 20); 
   x = x + 2; 
 } 
 
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(条件){ 条件が真のときに実行するコード } else { 条件が偽のときに実行するコード } 

例えば、 
if( x<0 ) { dx = 2; } 
 if( x<0 ) { dx = 2; } 
は、変数xの値が負であれば、dxに2を代入し、そうでなければ何もしないことを表す。 

 float x, y, dx; 
 
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; 
} 
 
 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; 
} 
 
 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; 
 
float x, y, dx; 
 
void setup(){ 
 void setup(){ 
    size(400,400); 
    x = 0; 
    y = height / 2; 
    dx = 2; 
    frameRate(20); 
} 
void draw(){ 
 } 
 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が必要であろう。
トップ   編集 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS