createRadio 

def setup
  @radio = createRadio
  @radio.position(0, 105)
  @radio.option('black')
  @radio.option('white')
  @radio.option('gray')
  @radio.style('width', '80px')
  textAlign(CENTER)
end

def draw
  val = @radio.value
  background(val)
  noFill
  rect(0, 0, width, height)
  fill(255, 0, 0)
  text(val, width / 2, height / 2)
end

def setup
  @radio = createRadio
  @radio.position(0, 105)
  @radio.option('10', 'apple')
  @radio.option('20', 'bread')
  @radio.option('30', 'juice')
  @radio.selected('20')
  @radio.style('width', '80px')
  textAlign(CENTER)
end

def draw
  background(200)
  val = @radio.value
  if val
    text('$' + val, width / 2, height / 2)
  end
end

p5.jsリファレンス(参考情報)

[p5.js] createRadio

概要

ラジオボタンを生成します。

書式

createRadio([name])
createRadio(containerElement [, name])

引数

引数名内容備考オプションデフォルト値
nameラジオボタンのグループ名○""
containerElementラジオボタンのコンテナとなる HTMLエレメント

戻値

p5.Elementオブジェクト
(<input type="radio"></input>タグの HTMLエレメント)

備考
(ラジオボタンのおもなメソッド)

メソッド内容備考
changed do ... endラジオボタンの状態が変わったときに実行される処理ブロックを記述
option(value, [label])ラジオボタンの選択対象項目を設定
valueラジオボタンで選択中の項目の value属性を取得
selectedラジオボタンで選択中の項目を取得
selected(value)指定した valueの項目を選択状態に設定
remove(value)指定した valueの項目を削除
disable(boolean)すべての項目を無効状態に設定
(引数による有効/無効の切り替えは動作せず)

関連