可変抵抗でWebページの背景色を変える
コンテンツ
今回やること
Webページの背景色を、obnizに繋いだ可変抵抗のつまみの角度によって変化させます。
用意するもの
- 可変抵抗(ポテンショメーター)
- obniz Board
- モバイルバッテリーなど
- スマートフォン or PC
組み立て方
可変抵抗のパーツライブラリを参考に、以下のように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ページの色の変わり方も変わるので、リンク先のページを参考に、いろいろな変え方にも挑戦してみてください。
