Circleクラスでつくるランダムウォーク

教材一覧へ

オプション課題1(コーディング レベル2)

課題のゴール Processing
  1. 起動時に、ウィンドウの中心へ直径30の円を描く。
  2. random(0, 4) の値に応じて、直前の円の上下左右いずれかに円を描く。
  3. draw() で同じ処理を繰り返し、円の軌跡を残す。

円の情報と描画処理は Circle クラスにまとめます。毎回オブジェクトを生成して drawShape() を呼ぶ構成です。

動作を確認
800 × 600
random(0, 4)初期値
描画方向中央
現在の座標(400, 300)
draw() 回数0

教材画面では1秒ごとに進みます。矢印が今回生成された円を示します。白い背景は最初に1回だけ描くため、円は消えずに残ります。

乱数と描画方向 各方向 25%
乱数の値方向座標の変更
1 未満x + 30
1 以上 2 未満x - 30
2 以上 3 未満y - 30
3 以上y + 30
1フレームの処理 draw()
beforeX / beforeY
直前の座標を読む
newX / newY
乱数で片方を±30
beforeX / beforeY
新しい座標を保存

Processing では下方向へ進むほど y 座標が大きくなります。そのため、上は y - 30、下は y + 30 です。

サンプルコード 穴埋め
/**
* 円を描画するクラス
*/
class Circle {
  int r;
  int positionX;
  int positionY;

  // new の時に渡される引数
  Circle(int rr, int x, int y) {
    r = rr;
    positionX = x;
    positionY = y;
  }

  void drawShape() {
    // 線の色を黒に設定
    stroke(0);
    // 塗りつぶしの色を設定
    int red = 100;
    int blue = 100;
    int green = 100;
    color fillColor = color( red, blue, green );
    fill(fillColor);
    ellipse(positionX, positionY, r, r);
  }
}

// 1つ前に描いた図形の位置
int beforeX = 0;
int beforeY = 0;
// 直径
int diameter = 30;

/**
* 最初に実行される
*/
void setup() {
  size(800, 600);

  // draw() の中で背景を描くと図形がリセットされてしまうので、setup() に記述
  background(255);


  // 初期の円をウィンドウの中心に描画


  // beforeX, beforeY に今回描いた図形の座行を入れておく


  // 繰り返し処理を設定
  // 2フレーム(drow()を1秒間に2回実行)
  frameRate(2);
}


/**
* 毎フレームごとに実行される
*/
void draw() {
  // draw() の中で background() を実行しなければ前に描いた図形が残り続ける

  // 0~4の範囲の乱数を生成


  // 今回新しく描画する円の座標を、1つ前の座標を使ってカスタマイズする
  int newX = beforeX;
  int newY = beforeY;




  // 新しい円を描画



  // beforeX, beforeY に今回描いた図形の座行を入れておく




}
提出前チェック 確認
  • 最初の円は (width / 2, height / 2) にある
  • newXnewY は直前の座標で初期化している
  • 描画後に beforeXbeforeY を更新している
  • Circle のフィールドをメソッドから描画に使っている
  • background(255)setup() にだけ書いている