createSlider 

def setup
  @slider = createSlider(0, 255, 100)
  @slider.position(10, 10)
  @slider.style('width', '80px')
end

def draw
  val = @slider.value
  background(val)
end

def setup
  colorMode(HSB)
  @slider = createSlider(0, 360, 60, 40)
  @slider.position(10, 10)
  @slider.style('width', '80px')
end

def draw
  val = @slider.value
  background(val, 100, 100, 1)
end

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

[p5.js] createSlider

概要

スライダーを生成します。

書式

createSlider(min, max [, value] [, step])

引数

引数名内容備考オプションデフォルト値
minスライダーの下限値
maxスライダーの上限値
valueスライダーの初期値○(未詳)
stepスライダーの移動量○1

戻値

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

備考
(スライダーのおもなメソッド)

メソッド内容備考
changed do ... endスライダーの状態が変わったときに実行される処理ブロックを記述
valueスライダーの value属性を取得
value(v)スライダーの value属性に値vを設定

関連