四角形だけでなく、円も描画するようにしてみましょう。
今回は、四角形か円どちらかをランダムに描画するようにしたいと思います。

このような処理を行いたい場合は、乱数と条件分岐を活用します。
条件分岐について詳しく知りたい方は、以下の入門コースの解説をご覧ください。
条件分岐とは - 入門コース

今回は、次のような流れで実現します。

• 乱数を使って、0〜1の間のランダムな数値を生成する
• ランダムな数値が0〜0.5未満であれば、四角形を描画する
• ランダムな数値が0.5〜1であれば、円を描画する

このような処理を記述することで、四角形か円どちらかをランダムに描画することができるようになります。

それではkeyPressed 関数を次のように変更してみましょう。

function keyPressed() {
  let randomX = random(W);
  let randomY = random(H);

  let randomW = random(W / 4);
  let randomH = random(H / 4);

  let randomR = random(255);
  let randomG = random(255);
  let randomB = random(255);

  fill(randomR, randomG, randomB);
  
  let r = random(0, 1);
  if (r < 0.5) {
    rect(randomX, randomY, randomW, randomH);
  } else {
    ellipse(randomX, randomY, randomW, randomH);
  }
}

最後のほうのコードが、今回変更したところです。

let r = random(0, 1);

まずこの部分で、乱数を使って、0〜1の間のランダムな数値を生成しています。
数値は整数ではなく実数が生成されることに注意してください。

そして、以下のコードによって、

• ランダムな数値が0〜0.5未満であれば、四角形を描画する
• ランダムな数値が0.5〜1であれば、円を描画する

を実現しています。

if (r < 0.5) {
  rect(randomX, randomY, randomW, randomH);
} else {
  ellipse(randomX, randomY, randomW, randomH);
}

if文を使うことで、「ランダムな数値が〜〜のとき、〜〜する」という処理を実現しています。

円を描画するには ellipse を使います。

ellipse(X座標, Y座標, 横幅, 縦幅);

のように指定します。

これで、四角形か円どちらかをランダムに描画することができるようになりました。

それではゲームを起動して、適当にキーボードを叩いて動作を確認してみましょう！
（ゲーム画面上をクリックしてからでないとキーボードが反応しない場合がありますので、まずゲーム画面のどこかをクリックしてから試してみてください）

次のレッスンでは、一定以上キーボードを叩くと画面がリフレッシュする動作を実現していきます。