LoginSignup
24
12

More than 5 years have passed since last update.

@a-r-i(ari)

アイドルが居る方角を指し示すコンパス

Last updated at Posted at 2017-06-25

概要

アイドルグループの・・・・・・・・・が6月24日、上野で開催した謎解きRPGイベント。
そのなかで「・ちゃんがいる方角を指し示すコンパスを頼りに、・ちゃんを探す」というミッションがありました。
この記事では、そこで使われた『・ちゃんが居る方角を指し示すコンパス』について解説します。

(・ちゃんとは、・・・・・・・・・メンバーのこと)

どんな様子だったのか、レポツイートを眺めてみる

イメージが掴みにくいと思うので、本題に入る前に参加者のツイートを見てみましょう。

2017/8/11追記
参加者の方が大変わかりやすいレポートをを書いてくださいました！
ここを読めば、おおよその流れが掴めます。
2017/6/24 ・・・・・・・・・第3回定期公演1部 ドッツRPG

開発手順

仕様

・Chris Haynesさんのコンパスアプリを下敷きにした。
・HTML5+Javascriptでつくられたブラウザアプリ
・データベースはFirebaseを使用
・コンパスアプリの他に、・ちゃんが位置情報を送るアプリを用意する。

ソースはGithubにあります。

仕組み

1.・ちゃんが位置情報をデータベースに送る
2.オタクが・ちゃんの位置情報をリアルタイムで取得する
3.二者の緯度経度から・ちゃんがいる方角を計算する
4.コンパスが・ちゃんが居る方角を指し示す

・ちゃんが位置情報をデータベースに送る

HTML5のnavigator.geolocation.watchPositionで、位置情報を定期的に取得。

navigator.geolocation.watchPosition( successFunc , errorFunc , optionObj ) ;

その位置情報はFirebaseのRealtime Databaseに追加されます。

dataStore.child(`geo`).push({latitude:position.coords.latitude, longitude:position.coords.longitude});

補足

当初、動的に、リアルタイムに位置情報が変化する実装を予定していたのですが、navigator.geolocation.watchPositionで位置情報を取得すると、実際の位置と400mほどズレてしまい、・ちゃんが見つけられないので、今回は目的地を固定することにしました。

オタクが・ちゃんの位置情報をリアルタイムに取得する

Realtime Databaseから、リアルタイムに・ちゃんの位置情報を取得します。

dataStore.child(`geo`).on('child_added',function(data){
    var json = data.val();

    targetLatitude = json['latitude'];
    targetLongitude = json['longitude'];

});

・ちゃんの位置情報を取得すると、・ちゃんが居る方角の計算が始まります。

二者の緯度経度から・ちゃんが居る方角を計算する

この部分は、ロジカルアーツ研究所の緯度経度から距離と方位を求めるプログラムを使いました。

var R_EARTH = 6378137;          // 地球の赤道半径
  var RAD = Math.PI / 180;  // 1°あたりのラジアン

  // 2点間の方位角を求める関数
  function azimuth(lat1, lon1, lat2, lon2) {
    // 度をラジアンに変換
    lat1 *= RAD;
    lon1 *= RAD;
    lat2 *= RAD;
    lon2 *= RAD;

    var lat_c = (lat1 + lat2) / 2;                  // 緯度の中心値
    var dx = R_EARTH * (lon2 - lon1) * Math.cos(lat_c);
    var dy = R_EARTH * (lat2 - lat1);

    if (dx == 0 && dy == 0) {
        return 0;   // dx, dyともに0のときは強制的に0とする。
    }
    else {
        return Math.atan2(dy, dx) / RAD;    // 結果は度単位で返す
    }
  }

コンパスが・ちゃんのいる方角を指し示す

計算結果を元に、CSSのtransformプロパティでコンパスを回転させます。

if (typeof rose.style.transform !== "undefined") {
 rose.style.transform = "rotateZ(" + positionCurrent.hng + "deg)";
} else if (typeof rose.style.webkitTransform !== "undefined") {
  rose.style.webkitTransform = "rotateZ(" + positionCurrent.hng + "deg)";
}

おわりに

・・・・・・・・・はテクノロジーを用いたイベントやパフォーマンスを行っています。

アイドルとオタクがBitcoinで永久に消えないメッセージを刻む
アイドルの睡眠データを3Dプリンタでオブジェ化して日本武道館で展示する

・・・・・・・・・が気になった方は公式Twitterを覗いて見てください。

24
12
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
Sign upLogin
24
12