加速度センサの傾きでWebの要素を傾ける

今回やること

加速度センサを傾けると、画像や文章・ボタンなどのWebの要素が傾きます。

用意するもの

組み立て方

加速度センサのパーツライブラリを参考に、図のようにobniz Boardと加速度センサを接続します。

obniz 加速度センサ KXR94-2050
0 Vdd(1番)
1 GND(3番)
2 X軸(6番)
3 Y軸(7番)
4 Z軸(8番)
5 Enable(2番)
6 Self Test(5番)

プログラム

任意の画像を2枚用意し、ファイル名を「img1.jpg」 「img2.jpg」 として、プログラムと同じフォルダ階層に置いてください。

Webの要素を傾けるには、CSSのtransformプロパティでrotateに角度を指定します。

$("#img-1").css({ transform: "rotate(" + angle + "deg)" });
$("#button-1").css({ transform: "rotate(" + angle + "deg)" });
$("#sentence-1").css({ transform: "rotate(" + angle + "deg)" });

最初の状態と今の状態での加速度を比較し、その差から傾きの大きさを調べます。
このとき、Math.abs関数を使うと絶対値で差を比較することができます。

if (Math.abs(currentAccelVals.y - initAccelVals.y) > 0.7) {
 //傾き大きめ
} else if (Math.abs(currentAccelVals.y - initAccelVals.y) > 0.5) {
 //傾き中くらい
} else if (Math.abs(currentAccelVals.y - initAccelVals.y) > 0.3) {
 //傾き小さめ
} else {
 //まっすぐに戻す
}

完成したプログラム

うごかす

図の向きに動かしてY軸を回転させると、Webの要素が左右3段階ずつ傾きます。