可変抵抗でWebページの背景色を変える

今回やること

Webページの背景色を、obnizに繋いだ可変抵抗のつまみの角度によって変化させます。

用意するもの

組み立て方

可変抵抗のパーツライブラリを参考に、以下のようにobniz Boardに接続します。

obniz 可変抵抗(ポテンショメーター)
0 pin0
1 pin1
2 pin2

pin0とpin2はどちら向きにつけても問題ありません。

プログラム

ページの背景色を変えるには、CSSのbackground-colorプロパティで色を指定します。

色の指定の仕方にはいろいろな方法がありますが、ここではHSL方式で色を定義します。
今回は色相(H)のところに可変抵抗から取得した値を入れています。

$('body').css('background-color','hsl(' +hue+ ',100%,70%)');

色相は角度で指定するので、Math.floor()関数を使って、可変抵抗の値(0.0〜1.0)を0〜359までの整数に変換します。

let hue = Math.floor(359 * position);

色の定義の仕方や可変にする部分を変えることで、Webページの色の変わり方も変わるので、リンク先のページを参考に、いろいろな変え方にも挑戦してみてください。

完成したプログラム