05-02 ラジオボタン

ラジオボタンは項目の中から１つを選択するものである。

ラジオボタンは以下のように作成する。ラジオボタンのチェックが変化したときの処理を行う関数はchangedメソッドにその関数名を指定する。選択されている項目の内容はradio.value()で取得できる。

  radio = createRadio();
  radio.option('赤');
  radio.option('緑');
  radio.option('青');
  radio.position(20, 20);
  radio.changed(処理関数名); 

p5.jsでは各オプションは標準で横に並ぶ。縦に並べる機能はないので、あえて縦に並べたい場合は表示する横幅のサイズを指定することで、そこからはみ出せば次の行に表示されることになる。

radio.style('width', '50px');

p5.jsでは複数のラジオボタングループを作り、それぞれのグループで選択することはできない。

例題 5-2-1

ラジオボタンで選択した色でキャンバスの背景色を設定する。

コード

let radio;

function setup() {
  createCanvas(400, 400);
  
  radio = createRadio();
  radio.option('赤');
  radio.option('緑');
  radio.option('青');
  radio.position(20, 20);
  radio.changed(changeBack); 
}

function changeBack() {
  let val = radio.value();
  if (val === '赤')
    background(255, 0, 0);
  else if (val === '青')
    background(0, 0, 255);
  else if (val === '緑')
    background(0, 255, 0);
}

練習問題5-2-1

　「登録」ボタンのクリックでラジオボタンの選択されている内容を表示する。

練習問題5-2-2

内容: ラジオボタンで選択した色で、画面に円を描画するプログラムを作成してください。円の位置はランダムに配置されます。

ヒント:

• circle()関数を使って、円の描画ができます。
• radio.value()で取得した色に基づいて円の色を設定しましょう。

練習問題5-2-3

内容: ラジオボタンで選択した色で、キャンバス全体の背景色とランダムに配置された四角形の色を変更するプログラムを作成してください。背景色と四角形の色は選択した色によって切り替わります。

ヒント:

• background()で背景色を設定します。
• rect()で四角形を描画し、ランダムな位置に配置するためにrandom()を使います。

練習問題5-2-4

内容: ラジオボタンで選択した色で、画面上にテキストメッセージを表示するプログラムを作成してください。表示されるメッセージは選択した色の名前（例:「赤が選ばれました」）にします。

ヒント:

• text()関数を使ってメッセージを表示します。
• fill()でテキストの色を設定することができます。

練習問題5-2-5

内容: ラジオボタンで「赤」「緑」「青」に加え、「黄色」と「黒」を追加し、選択した色でキャンバス全体の背景色を設定するプログラムを作成してください。また、「黒」が選ばれたときは「色が選ばれていません」と画面に表示するようにしてください。

ヒント:

• radio.option()で新しい色を追加します。
• if文を使って、選択した色が「黒」かどうかを判定し、メッセージを表示します。

練習問題5-2-6

内容: 「登録」ボタンを追加し、ラジオボタンで選択した色が「赤」「緑」「青」「黄色」のいずれかの場合、その色でキャンバスの半分を塗りつぶし、「黒」の場合は全体をグレーに塗りつぶすプログラムを作成してください。

ヒント:

• button.mousePressed()でボタンのクリックイベントを設定します。
• rect()関数でキャンバスの半分を色で塗りつぶすことができます。

練習問題5-2-7

ラジオボタンを使って選択された果物を表示するプログラムを作成しなさい。果物の種類は「りんご」「みかん」「バナナ」の3つとします。