太陽と地球の関係を理解しやすくするWebアプリの進捗状況

8割方できた(*´ェ`)

2019年4月1日21時0分0秒JSTの地球の様子をブラウザでシミュレートしてみる(*´ェ`)

ブラウザで現在時刻をUTCで取得、APIに問い合わせ指定時刻の地球の傾きや回転、太陽の地心座標などを取得、結果をWebGLで描写する(*゚ェ゚*)

地球の様子

Day Night Map

API(Go製)はEOPを取得する為のAPI(RoR製)に問い合わせ、その結果を元に
以下のような結果が返ってくるプログラム(C言語)を作成した(*´ェ`)


UTC: 2019/04/01 12:00:00.000000
UT1: 2019/04/01 11:59:59.880856
TAI: 2019/04/01 12:00:37.000000
TT: 2019/04/01 12:01:09.184000
TCG: 2019/04/01 12:01:10.113142
TDB: 2019/04/01 12:01:09.185672
TCB: 2019/04/01 12:01:29.857194
(TAI-UTC): 37s
(TT-UTC): 69.184s
DUT1: -0.119144s
GAST: 9.556986
GMST: 9.561109
EE: -0.000072
EO: -0.242480
ERA: 9.314506
NL: -16.182279
NO: -2.939230
MOE: 23.436775
TOE: 23.435959
.
.
.

この結果をAPI(Go製)側でパースしてブラウザ側に返している(*´ェ`)


{
  "em": 0.99922431958942692,
  "gast": 9.5569856385418888,
  "gmst": 9.5611092065398857,
  "toe": 23.435958905709278,
  "sun": {
    "ra": 10.547232111832226,
    "dec": 4.5367110362474303,
    "lon": 11.471388099207983,
    "lat": -5.6459338108005382e-05
  }
}

ブラウザ側はVueとthree.jsを使用してTypescriptで書いている(*゚ェ゚*)

そのうちNuxt.jsで作り直すかもしれない(*´ェ`)

ブルーマーブルの画像
Credit: NASA Goddard Space Flight Center Image by Reto Stöckli (land surface, shallow water, clouds). Enhancements by Robert Simmon (ocean color, compositing, 3D globes, animation). Data and technical support: MODIS Land Group; MODIS Science Data Support Team; MODIS Atmosphere Group; MODIS Ocean Group Additional data: USGS EROS Data Center (topography); USGS Terrestrial Remote Sensing Flagstaff Field Center (Antarctica); Defense Meteorological Satellite Program (city lights).
地球の街の灯画像
Credit: Data courtesy Marc Imhoff of NASA GSFC and Christopher Elvidge of NOAA NGDC. Image by Craig Mayhew and Robert Simmon, NASA GSFC.

CLion から Raspberry Pi にリモートデバッグ

Mac に入れている CLion で開発しているプログラムコードをラズパイに送りラズバイ上でビルドしてデバッグする(*´ェ`)
これが割とサクッとできるようになった∑(*゚ェ゚*)

環境
CLion 2018.3.2
Raspberry Pi 3 B+

pi@raspberrypi:~ $ lsb_release -a
No LSB modules are available.
Distributor ID: Raspbian
Description: Raspbian GNU/Linux 9.6 (stretch)
Release: 9.6
Codename: stretch

CMake をインストールする

pi@raspberrypi:~ $ sudo apt-get install build-essential cmake

CLion の設定

Preferences > Build, Execution, Deployment > Toolchains
Toolchains にラズパイ用のツールチェーンを追加する

Preferences > Build, Execution, Deployment > CMake
CMake にラズパイでデバッグ用のプロファイルを追加する
Build type と Toolchain を選択する

Preferences > Build, Execution, Deployment > Deployment > Connection
ここは自動で設定されているはず(*´ェ`)
お味噌:ここで Root path に / を設定しているのは次の Mappings の設定でフルパスを指定するため(*´ェ`)

Preferences > Build, Execution, Deployment > Deployment > Mappings
Deployment path を指定する

これでビルドタイプスイッチャーにラズパイデバッグ用(RasPi-Debug)の CMake profile を選択できるようになる(*´ェ`)

宇宙に興味を持ったので

空を見上げると太陽や月が動いている。ように見える。

太陽系の外から見ると地球が太陽の周りを回っていた。

空、ソーラー、そうら!

太陽や月や地球がどのように動いているか想像だけではよくわからないので「自分が」理解しやすいようにグラフィカルに表現してみる(*´ェ`)

Webブラウザで表示できればどこからでも見られて便利なのでWebアプリを作ることにする(*゚ェ゚*)

ざっくり考えた図がこれ

ざっくり宇宙システム図

これを作っていく(*´ェ`)

PythonでルーターからグローバルIPを取得する

Pythonってすごく便利で簡単に扱える(*´ェ`)

何が便利ってライブラリが豊富で必要なものはすでに用意されているってトコロ(*゚ェ゚*)

何が簡単ってコード書いてパパっと実行して結果を得られるトコロ(*゚ェ゚*)

学習2日目で Buffalo の WXR-2533DHP からグローバルIPを取得するコードが書けた(*´ェ`)

Gramapを使った都道府県別人口比率のグラフ

Gramap のアップデートで追加したボリュームマップを使って都道府県別人口比率をグラフにしてみた(*゚ェ゚*)

※都道府県庁所在地に配置されている円にマウスカーソルを合わせると表示される名前は都道府県名ではなく都市名なので注意(*´ェ`)

大正9年(1920年)

昭和16年(1941年)

昭和20年(1945年)※沖縄含まず

平成26年(2014年)

平成26年(2014年)鶏頭図

平成26年(2014年)ツリーマップ

データは以下より入手しました。
「都道府県別人口(各年10月1日現在)-総人口(大正9年~平成12年) 」(総務省統計局) http://www.e-stat.go.jp/SG1/estat/List.do?bid=000000090004&cycode=0 を基に作成

「人口推計(平成26年10月1日現在)」(総務省統計局) http://www.stat.go.jp/data/jinsui/2014np/index.htm を基に作成

最新の Gramap は Windows ストアで入手できます

Gramap用ColorPicker

Gramap内のカラー選択用にカラーピッカーを作成した(*゚ェ゚*)

GramapColorPicker

カラーピッカーを閉じるにはカラーピッカー外を選択するかカラーピッカー内の左上の色をタップすることで閉じます。
また、カラーピッカーの右上の色選択すると新しい色の選択前の色へ戻すことができます。

Gramap 公開

アプリ名 Gramap Tablet_Gramap_left_angle_2
説明

日本の都道府県を対象にしたグラフィカルなマップを簡単に作成できます。

機能
  • 一部SVG形式で保存する事ができます。
Windows ストアで入手できます

SVGで出力したファイルはIllustratorやブラウザで開くことができーるです。

都道府県庁所在地を元にするとこうなる

円形

横並び

縦並び

今回はアプリ提出から1時間程で公開された(*゚ェ゚*)

Windows ストア アプリ はじめました

アプリ名 IP計算 Tablet_IPKeisan_left_angle_2
説明

IP Range から CIDR、CIDR から IP Range に変換します。

計算結果のリストにはネットマスク、ネットマスク(2進数)、アドレス数なども表示されます。

各表示項目はオプションで切り替えられます。

機能
  • IP Range から CIDR に変換
  • CIDR から IP Range に変換
  • リストをダブルタップでテキスト選択
  • 計算結果をテキストファイルに保存
Windows ストアで入手できます

勢いで作ってしまいました(*゚ェ゚*)

Windows ストアで公開するのは初めてだったのでアプリの情報入力に時間がかかったけれども全体的に思っていたよりスムーズ。

アプリの情報を入力したりスクリーンキャプチャした画像を用意したり、ちょっぴりドキドキしながらアプリを提出(アップロード)した。

時刻は 2014/10/22 05:48

ここから認証ステータスが1から段階的に変わる

  1. 前処理
    通常、1時間以内で完了します。
  2. セキュリティテスト
    通常、3時間以内で完了します。
  3. テクニカルコンプライアンス
    通常、6時間以内で完了します。
  4. コンテンツコンプライアンス
    通常、5日以内で完了します。
  5. リリース
    アプリが認定されるまで待ちます。
  6. 署名とパブリッシュ
    通常、4時間以内で完了します。

というような流れで1~5が終わったところで「アプリが認定されました」メールが届いた。

時刻は 2014/10/22 06:45

提出(アプリのアップロード)からわずか1時間。

そこからの認証ステータス6が長く、翌日「Windows ストアに公開されました」メールが届いた。

時刻は 2014/10/23 05:53

提出(アプリのアップロード)からWindows ストアに公開されるまでの時間は1日と5分。

あれ、早いな(*゚ェ゚*)

 

Barnes-Hut

力指向グラフを調べていたら Barnes-Hut のアルゴリズムを Processing で書いているサイトがあったので C#に書き直して WPFアプリケーションに移植してみた(*´ェ`)

参考サイト先にも書かれている通り、初期の配置を考えないとごちゃごちゃになってしまう(*゚ェ゚*)

参考サイト
Barnes-Hutのアルゴリズムについて

今後は最適化と高速化したい(*´ェ`)