連続モードのプログラミング

連続モードのプログラミング

ここまでのプログラムは[Run]ボタンを押すと一度だけ実行され、線や丸が書かれると以降は何も起こりませんでした。

動的に更新されるプログラムを作成します。

アニメーション

丸が移動してゆくプログラムを作成しましょう。

float x, y;

void setup(){
  size(400, 400);
  smooth();  //円の縁を滑らかにする
  stroke(255);
  background(0);
  x = 0;
  y = 0;
}

void draw(){
  ellipse(x, y, 20, 20);
  x = x + 1;
  y = y + 1;
}

setup()ブロック({}で囲まれている)はプログラムの起動時に1回だけ実行されます。

draw()ブロックは 停止(Stop)ボタン(■)が押されるまで、繰り返し何度も実行されます。

void は「戻り値なし」ということを表しています。詳しくは後で説明します。

プログラムの先頭で変数 x と y を宣言しています。
float は x と y が小数型であることを表しています。

関数を使う場合、関数の外では変数の宣言だけが行えます。
関数の外(プログラムの先頭)で宣言した変数は、全ての関数の中で使えます。
一方、関数の中で宣言した変数は、その関数の中でだけ使えます。

このままだと、描いた丸を消していないので、軌跡が残ってしまいます。

ellipseの前にbackground(0); を足して、いったん黒で画面を塗りつぶしてから丸を描くということを繰り返すことで、移動する丸を表現できます。

float x, y;

void setup(){
  size(400, 400);
  smooth();  //円の縁を滑らかにする
  stroke(255);
  background(0);
  x = 0;
  y = 0;
}

void draw(){
  background(0);  //画面を黒で塗りつぶす
  ellipse(x, y, 20, 20);  //白い円を描く
  x = x + 1;
  y = y + 1;
}

例題

• 丸の初期位置や、移動する方向を変えてみてください。

加速度運動

物体に力が加わると、等加速度運動を生じます。

速度(ベクトル)を変数 vx, vy として、等加速度運動を生じさせてみましょう。

float x, y;
float vx, vy;
float ax, ay;

void setup(){
  size(400, 400);
  smooth();  //円の縁を滑らかにする
  stroke(255);
  background(0);
  x = 0;
  y = 200;
  vx = 0;
  vy = 0;
  ax = 0.01;
  ay = 0;
}

void draw(){
  //background(0);  //画面を黒で塗りつぶす
  ellipse(x, y, 20, 20);  //白い円を描く

  vx = vx + ax;
  vy = vy + ay;

  x = x + vx;
  y = y + vy;
}

例題

• 丸に、画面内で放物運動(放物線を描くような運動)をさせてください。

ユーザーの入力に応答する～マウスからの入力

次に、ユーザーからの入力に反応するプログラムについて考えます。

void setup(){
  size(400, 400);
  stroke(255);
  background(192, 64, 0);
}

void draw(){
  line(150, 25, mouseX, mouseY);
}

mouseXとmouseYは特別な変数で、画面上にマウスのポインタがあるときに、その座標を参照します。

mouseX, mouseYはリファレンス中の[Input]のところに説明があります。

イベントを使う

setupとdrawを使うことで、時間とともに変化するアニメーションや、ユーザーからの入力に反応するプログラムを作成できます。

さらに、特定の動作に反応して実行するプログラムを書くことができます。
例えば、mousePressed()メソッドは、マウスのボタンが押されたときに実行されます。

下記を実行して、画面上でマウスをクリックしてみてください。

void setup(){
  size(400, 400);
  stroke(255);
  background(192, 64, 0);
}

void draw(){
  line(150, 25, mouseX, mouseY);
}

void mousePressed(){
  ellipse(mouseX, mouseY, 50, 50);
}

例題

• 前に作った丸が進んでいくプログラムで、マウスをクリックするたびに丸が止まったり、動き出したりするようにしてください ¹⁾この課題は少し難しいかもしれませんね。例えば、速度に相当する変数、v を用意し、マウスをクリックしたとき、vが0なら1に、1なら0にするような処理を書くことになります。あとは前の問題でdraw中でθに相当する変数を大きくしていた処理 theta = theta +1 のところを theta = theta + v にすればOKです。。