乱数と条件分岐を使ってみよう

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

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

チャプター2はじめに

このレッスンでは、条件分岐を使ってプログラムを条件によって分けることに挑戦します。また、それらを乱数と組み合わせることで、綺麗な図形を描くことを目指します。

チャプター3ランダムに図形のX座標を変えてみよう

3. 1 写してみよう

function setup() {
  createCanvas(400, 400);
  background(220);
}

function draw() {
  var circleXpos = random(400);
  var circleYpos = random(400);
  fill(255,0,0,50);
  ellipse(circleXpos,200,50,50);
}

3. 2 コードの解説

• 7行目
  • random(400)は、実行されるたびに、0〜400のランダムな数字になります。また、変数circleXposやcircleYposに代入されています。
• 10行目
  • circleXposがランダムな数字になっているため、横の位置がランダムに変わります。

チャプター4ランダムに図形のY座標を変えてみよう

ランダムな数字を円のY座標にも使ってみるとどうなるでしょう？

4. 1 変更しよう

円のY座標を、circleYposに変更してみましょう。変更できたら実行してみましょう。

  ellipse(circleXpos,200,50,50);

  ellipse(circleXpos,circleYpos,50,50);

4. 2 コードの解説

円のX座標とY座標がどちらもランダムな数字となったので、キャンバスの全体に円が描かれるようになります。

チャプター5X座標に応じて色を変えてみよう

次に、X座標の位置に応じて、色を変えてみることにします。

5. 1 変更しよう

キャンバスの左半分にあれば緑になるように変化させます。ifというものを使ってみます。次のように変更してみましょう。

function setup() {
  createCanvas(400, 400);
  background(220);
}

function draw() {
  var circleXpos = random(400);
  var circleYpos = random(400);
  fill(255,0,0,50);
+ if(circleXpos < 200){
+   fill(0,255,0,50);
+ }
  ellipse(circleXpos,circleYpos,50,50);
}

5. 2 コードの解説

ifについて簡単に説明します。ifを使うと、条件に応じて処理を分けることができます。

• 10行目
  • circleXpos < 200 は、変数circleXposが200より小さいときという意味です。この条件に当てはまるのは、円がキャンバスの左半分にあるときという意味になります。
• 11行目
  • 条件に当てはまったときは、円の色を緑にするというfill(255,0,0,50)が描かれています。

if文の書き方

if文は()の中に条件の式を書きます。また{}で挟むことも忘れないようにしてください。条件を満たした場合の処理は、インデントを半角2マス分を入れておくとわかりやすいです。

if(条件式){
 条件を満たした場合
}

また、次のように書くこともできますが、処理が1つ以上になるとわかりにくくなるので、上記のように書くことを進めます。

if(条件式){条件を満たした場合}

5. 3 チャレンジしよう

次のように、下半分の円は青色になるようにプログラムを書き加えましょう。

ヒント

• Y座標が200より大きい場合はという条件を加えると

• 4つに分けたくなるかもしれませんが、それは今後のレッスンで扱うことにします。