太陽と地球の関係を理解しやすくする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.

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のアルゴリズムについて

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

OpenTKでアプリ ぴくせるぶろっく(仮)

OpenTKを使って何かアプリを作ろう(*´ェ`)

2Dの画像を読み取り3Dデータにして書き出してみよう(*´ェ`)

ぴくせるぶろっく(仮)

書き出された3DデータはWavefront OBJ形式でLightWave3Dに読み込んでアニメーションさせてみた(*゚ェ゚*)

2D画像のピクセルを正方形の3Dのブロック状にするだけで
アプリに表示される3DビューはX-Y-Z軸回転と視野角、拡大縮小機能が付いてる、おまけみたいなもの(*´ェ`)

その3DビューにOpenGLを使って3Dモデルを表示させているのだ(*´ェ`)

書き出されたWavefront OBJ形式のファイルはPhotoShopでも読み込めたりする(*´ェ`)

LifeSim – 01

各パーティクルを男性(青色)、女性(赤色)に分けてランダムウォークさせ、同じ座標であれば結婚して線を結び色を変える、男性は緑色、女性はピンク色(*´ェ`)
何のひねりもないアイコンを作ってパーティクルに割り当てた(*´ェ`)

既婚者と同じ座標になっても何も起きないので何か起こしたほうがいいのか(*゚ェ゚*)
フィールドは上下左右ループになっているので線が無駄に長くなってしまうので壁を作ってフィールド内に閉じ込めよう(*´ェ`)

既婚者の線がある一定以上になると離婚ということにしてもいいかもしれない(*´ェ`)

実装予定
・結婚してから一定以上経つと子供を産むようにする、子供は両親の情報を受け継ぐ
・フィールドは壁でくくる
・寿命を与える
・既婚者同士の距離が一定以上離れると、性格の不一致により離婚する

人工生命の始まり始まり

人工生命(Artificial Life)に挑戦してみよう(*´ェ`)
人工生命といってもロボットや機械といったHard Artificial Lifeではなく、生化学的なWet Artificial Lifeでもなく、ライフゲームのようなSoft Artificial Lifeなのだ(*゚ェ゚*)

プログラミング言語はC#
グラフィックライブラリはOpenGL
アプリケーション名はLifeSimにした(*´ェ`)

LifeSim – 00

一つ一つの点が個体生物として
移動はランダムウォークで同じセルに重なると一方は死滅する
学習能力はない

というとっても単純な生物(*´ェ`)

この単純な生物に捕食・繁殖・進化・遺伝・学習といった機能を付けていく(*´ェ`)

一種類の生物だけでなく多種類の生物も欲しいし見た目の変化なんかもあった方がいいな(*´ェ`)