変数を使って図形を動かしてみよう

チャプター1このレッスンのゴール

このレッスンで完成させるものを確認しよう

チャプター2図形のアニメーションをつくってみよう

このレッスンでは、図形を動かすプログラムをつくります。変数を使うと、図形を動かすことができます。そのためには、setup関数とdraw関数の関係を理解することが大切です。今後も大切なので、少しずつ進めていきます。しっかり理解しましょう。

2. 1 写してみよう

次のコードを写して、実行してみよう。
4行目のbackgroundは、いったんコメントアウトしておこう。

var circlePos = 0;
function setup() {
  createCanvas(400, 400);
  background(220);
}

function draw() {
  ellipseMode(CENTER);
  noStroke();
  fill(0);
  circlePos = circlePos + 1;
  ellipse(200+circlePos, 200, 50, 50); //右へ移動
}

円が中心から右に向かって動き、線がひかれるようになっていればOKだよ。

2. 2 コードの説明

• 1行目
  • circlePosは円の位置という意味で名前をつけたよ。
• 11行目
  • circlePos = circlePos + 1は、実行されるたびに、circlePosが1ずつ増えるという意味だね。つまり、円のX座標の位置が1ずつ増えるという意味になっているよ。少しずつずれながら円が描かれるため、線が描かれているように見えます。また、draw関数について、以下で詳しく説明します。

2. 3 setup関数とdraw関数

setup関数

setup(){}の{と}の間に書かれた処理は、最初に一度だけ実行されます。

draw関数

draw(){}の{と}の間に書かれた処理は、上から順に実行され、最後まで実行されると再び最初に戻り実行されます。これは、プログラムが止まるまでずっと繰り返されます。

draw(){
	//ここに書かれた処理は、プログラムが実行されているあいだ繰り返される
} 

チャプター3背景も毎回描き直そう

背景を描く、backgraoundがsetup内か、draw内かによって、随分変わります。このチャプターでは、draw内に描いた場合を確認しておきましょう。

3. 1 変更しよう

4行目をコメントアウトして8行目に新たにbacground〜を加えよう。加えたら実行してみよう。

var circlePos = 0;
function setup() {
  createCanvas(400, 400);
  //background(220);
}

function draw() {
  background(220);
  ellipseMode(CENTER);
  noStroke();
  fill(0);
  circlePos = circlePos + 1;
  ellipse(200+circlePos, 200, 50, 50); //右へ移動
}

円が右に向かって動いているように見えていればOKだよ。

3. 2 コードの解説

• 4行目
  • background()の関数がsetup関数の中に書かれています。背景が最初の1度だけ呼び出されるコードに変更されたことになるため、円の動く軌跡が残ることになります。

チャプター4図形が繰り返し動くようにしよう

図形が、繰り返し動くように調整していこう。簡単な方法として、割り算の余りにを使えばいいよ。今回12行目を少し変更するだけだよ。

4. 1 変更しよう

次のようにコードを変更して、実行しよう。

var circlePos = 0;
function setup() {
  createCanvas(400, 400);
  //background(220);
}

function draw() {
  background(220);
  ellipseMode(CENTER);
  noStroke();
  fill(0);
  circlePos = (circlePos + 1) % 201;
  ellipse(200+circlePos, 200, 50, 50); //右へ移動
}

4. 2 コードの解説

• 12行目
  • circlePos % 201はcirclePosの値を201で割った余りという意味です。このようにすることで、値がどんどん大きくなるcirclePosも、必ず1〜255の値になります。今回のキャンバスサイズが400×400で、右端や左端に移動するまでに200進む必要があるため、201で割った余りにしています。他の数字でも試してみましょう。

チャプター5色にも変数を適用しよう

criclePosは1〜200の値をとるようになったので、色にも適用して見ましょう。キャンバスサイズの端に近づくと、背景の色と同じようになることを確認しましょう。

5. 1 変更しよう

円の色を決めている11行目のグレースケールの色を0からciclePosに変更してみましょう。変更したら実行結果を確認しましょう。

var circlePos = 0;
function setup() {
  createCanvas(400, 400);
  //background(220);
}

function draw() {
  background(220);
  ellipseMode(CENTER);
  noStroke();
  fill(circlePos,50);
  circlePos = (circlePos + 1) % 201;
  ellipse(200+circlePos, 200, 50, 50); //右へ移動
}

5. 2 コードの解説

色には透明度50を指定しました。色の指定は2つの場合は2つめが透明度、4つの場合は4つ目が透明度でしたね。復習しておこう。

チャプター6完成させよう

円の数と移動方向を変化させて、完成させよう。完成のコードは自分で考えてください。

（ヒント）

• circlePosをx座標にもy座標にも、加えることで右下に動きます。