LoginSignup
4
3

More than 3 years have passed since last update.

JavaScriptで加速度センサーひろってみた

Last updated at Posted at 2020-11-28

加速度センサーを拾ってみた

window.addEventListener("devicemotion", ハンドラとなる関数);
で拾えます。(使えるかどうかは、使用しているデバイスとブラウザに依存します。)

image.png

  • 赤 ・・・ event.accelerationIncludingGravity.x の値
  • 緑 ・・・ event.accelerationIncludingGravity.y の値
  • 青 ・・・ event.accelerationIncludingGravity.z の値
  • 白 ・・・ 上記をベクトルとみなしたときの長さ。(それぞれを2乗して和を取って平方根を取ったもの)

CodePen

(※センサを搭載していないデバイスで閲覧している場合、何も面白くないものが表示されていると思います。)

センサを搭載してても、Qiita記事への埋め込みだとセンサが取れないっぽい。
CodePenのサイトから直接閲覧する必要あり。

スマホでCodePenのサイトを直接開いて、スマホを上下方向などに動かすと波形が振れると思います。(壊さないようにお気をつけください。)

See the Pen g-Sensor by kob58im (@kob58im) on CodePen.

参考

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3