05-04 スライダー

スライダーは最小値と最大値の間の値をスライドバーにより変化させることができる。

スライダーはは以下のように作成する。スライドバーの値はslider.value()で取得できる。

slider = createSlider(0, 100, 50);
slider.position(10, 10);
slider.size(200);

縦のスライダーは以下のように回転して作ることができるが、コンテナを回転しているので、psitionで指定する位置を調整する必要がある。

slider.style('rotate', '90deg');

例題 5-4-1

横スライダーを赤成分、縦スライダーを青成分として、背景色を表示する。

コード

let sliderH, sliderV;

function setup() {
    createCanvas(400, 400);

    sliderH = createSlider(0, 255, 127);
    sliderH.position(0, 400);
    sliderH.size(400);

    sliderV = createSlider(0, 255, 127);
    sliderV.position(210, 190);
    sliderV.size(400);
    sliderV.style('rotate', '90deg');
}

    function draw() {
    let r = sliderH.value();
    let b = sliderV.value();
    background(r, 0, b);
}

練習問題5-4-1

　横スライダーをx座標、縦スライダーをy座標として、イメージ（ヒーロー）が移動するように表示位置をスライダーで変えなさい。

ダウンロード用データ

練習問題5-4-2

背景をスライダーで移動しなさい。

練習問題5-4-3

スライダーで円の色を変える

スライダーを使って、円の色を変更できるようにします。3つのスライダーでRGB値を調整します。

練習問題5-4-4

スライダーでサイズと透明度を変更

スライダーを使って、円の大きさと透明度を変えられるようにします。
ヒント：透明度は、fill()関数の引数を調べ追加しなさい

練習問題5-4-5

スライダーでアニメーションの速度を調整

スライダーを使って、画面を動く円の速度を調整できるようにします。