(p5element).option

def setup
  rectMode(CORNERS)
  ellipseMode(CORNERS)
  @sel = createSelect
  @sel.position(0, 105)
  @sel.option('rect', '矩形')    # value, label
  @sel.option('ellipse', '円')
  @sel.option('line', '直線')
  @sel.selected('circle')
  @radio = createRadio
  @radio.position(55, 105)
  @radio.option('red', '赤')     # value, label
  @radio.option('green', '緑')
  @radio.option('blue', '青')
  @radio.vertical
  @radio.selected('green')
end

def draw
  background(220)
  strokeWeight(5)
  stroke(@radio.value)
  case @sel.value
  when 'rect'
    rect(15, 15, 85, 85)
  when 'ellipse'
    ellipse(15, 15, 85, 85)
  when 'line'
    line(15, 15, 85, 85)
  end
end

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

[p5.js] createSelect
[p5.js] createRadio

概要

HTML要素に選択項目を追加します。

書式

obj.option(value [, label])

引数

引数名内容備考オプションデフォルト値
value選択項目の値valueメソッドで取得される値
labelラベル画面に表示される文字列引数 valueの値

戻値

obj (メソッドを呼び出した p5elemetオブジェクト自身)

備考

createSelectメソッドまたは
 createRadioで生成されたオブジェクトに対してのみ有効です。

・ドロップダウンリスト(選択リスト)で2つの引数を指定した場合、
 p5.jsとは引数の順序が逆になります。
 (ラジオボタンと引数の並びを揃えるための rbCanvas/p5による独自調整です)

関連

createSelect
createRadio