正方形を横に動かす

step.1 静止した正方形を描く

//最初に1回だけ実行する
void setup() {
  size(200, 200);
}

//毎フレーム繰り返し実行する
void draw() {
  rect(0, height/2, 10, 10); //画面中央左に一辺が10pxの正方形を描く
}

rectのx座標がじょじょに大きくなれば、正方形は数のように左に移動し、動いているように見える。

1b-02-1-26 1b-02-1-52 1b-02-1-79

step.2 正方形のx座標を変数で置き換え、変数の値がじょじょに大きくなるようにする

float x; //小数型の変数xを宣言
void setup() {
  size(200, 200);
  x = 0; //xの初期値を0とする
}

void draw() {
  x += 1; //毎フレームで正方形のx座標を1ずつ増やす
  rect(x, height/2, 10, 10);
}

motion-linear01

正方形が動くようになったが、黒い帯が残る。これは、正方形が描き重ねられているからである。毎フレームで画面をクリアした後に正方形を描けば、黒い帯は残らないようになる。

step. 3 画面をクリアしてから正方形を描画する

float x;
void setup() {
  size(200, 200);
  x = 0;
}

void draw() {
  background(204); //背景色を設定することで画面をクリアする
  x += 1;
  rect(x, height/2, 10, 10);
}

正方形が画面右に消える（正方形のx座標が200を超える）と、画面に変化がなくなってしまい退屈である。次に、右に消えたら再び左から現れるようにしよう。

step. 4 ループ移動させる

float x;
void setup() {
  size(200, 200);
  x = 0;
}

void draw() {
  background(204);
  x += 1;
  if (x > width) x = -10; //正方形が画面からはみ出たら、正方形を画面の左外に戻す
  rect(x, height/2, 10, 10);
}

step. 5 正方形の出現位置をランダムに設定する

if文を実行する際、正方形のy座標をランダムに設定するし、さらに変化を付ける。

float x, y; //変数にyを追加
void setup() {
  size(200, 200);
  x = 0;
  y = height/2; //yの初期値を画面の中央にする
}

void draw() {
  background(204);
  x += 1;
  if (x > width) { 
    x = -10;
    y = random(width - 10); //正方形が画面内に収まる範囲で、yの値をランダムに設定
  }
  rect(x, y, 10, 10);
}

練習 - 上記のプログラムを改変してみる

  1. 正方形の幅を変数wで表し、任意の大きさの正方形がループ移動するプログラムに書きかえる
  2. 正方形の移動するスピードを速くする、または遅くする
  3. 正方形の移動するスピードを変数speedで表し、任意のスピードで正方形が移動するプログラムに書きかえる
  4. 正方形を右から左に動かす（ヒント：元のプログラムを書きかえる際、if文はコメントアウトしておき、移動の部分を書きかえてから、if文でのループ移動の条件を書きかえる）
  5. 正方形を上から下に動かす
  6. 円を動かす

座標を移動する

座標を移動することで、正方形が動いているように見せることができる。このやり方の方が汎用性がある。

float x, y;
float speed;
int w;
void setup() {
  size(200, 200);
  x = 0.0;
  y = height/2.0;
  speed = 1.0;
  w = 10;
}

void draw() {
  background(204);
  x += speed;
  if (x > width) {
    x = -w;
    y = random(width - w);
  }
  translate(x, y); //座標を移動する
  rect(0, 0, w, w); //座標を移動するので、正方形は固定の位置に描画する
}

応用例：バスを動かす

float x, y;
float speed;
void setup() {
  size(200, 200);
  x = 0.0;
  y = height/2.0;
  speed = 1.0;
}

void draw() {
  background(204);
  x += speed;
  if (x > width+60) {
    x = -60;
    y = random(30, width-45);
  }
  translate(x, y);
  //draw Bus
  rectMode(CENTER);
  rect(0,0,120,60);
  ellipse(-35,30,30,30);
  ellipse(35,30,30,30);
  ellipse(-35,30,20,20);
  ellipse(35,30,20,20);
  rectMode(CORNER);
  rect(45,-20,15,20);
  rect(-5,-20,30,20);
  rect(-50,-20,30,20);
}