createSlider

(別名: create_slider)

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

def setup
  background(220)

  # 水平スライダー
  slider_h = createSlider(0, 100, 50)
  slider_h.position(10, 80)
  slider_h.style('width', '80px')

  # 垂直スライダー
  slider_v = createSlider(0, 100, 50)
  slider_v.position(0, 80)
  slider_v.style('width', '80px')
  slider_v.style('transform-origin', 'top left')        # 左上を回転の基点に設定
  slider_v.style('transform',
                 'rotate(-90deg) translate(-5px, 0px)') # 垂直に回転+縦位置調整
end

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

[p5.js] createSlider

概要

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

書式

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

引数

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

戻値

elm : p5elementオブジェクト
　　　(<input type="range"></input>タグの HTML要素)

備考

・スライダーに関するおもなメソッドなど

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

関連

HTMLElement 対応表