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] createSelect
[p5.js] createRadio
HTML要素に選択項目を追加します。
| 引数名 | 内容 | 備考 | オプション | デフォルト値 |
|---|---|---|---|---|
| value | 選択項目の値 | valueメソッドで取得される値 | ||
| label | ラベル | 画面に表示される文字列 | ○ | 引数 valueの値 |
obj (メソッドを呼び出した p5elemetオブジェクト自身)
・createSelectメソッドまたは
createRadioで生成されたオブジェクトに対してのみ有効です。
・ドロップダウンリスト(選択リスト)で2つの引数を指定した場合、
p5.jsとは引数の順序が逆になります。
(ラジオボタンと引数の並びを揃えるための rbCanvas/p5による独自調整です)