Circleクラスでつくるランダムウォーク
教材一覧へオプション課題1(コーディング レベル2)
課題のゴール
Processing
- 起動時に、ウィンドウの中心へ直径30の円を描く。
random(0, 4)の値に応じて、直前の円の上下左右いずれかに円を描く。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)にある newXとnewYは直前の座標で初期化している- 描画後に
beforeXとbeforeYを更新している Circleのフィールドをメソッドから描画に使っているbackground(255)はsetup()にだけ書いている