Stock Chart #3

今回も大人のゲームプログラミング、チャートプログラムの進捗です。

 

コメント表示

comment_20161213

調べ物をしているとなぜここで値動きに変化があるのかと思うことがあるので記入できるようにしました。

 

comment_detail_20161213

このプログラムを作るきっかけになったのはPokemon Goで急騰急落した任天堂のチャートでした。あのチャートに様々なドラマを見て心揺さぶられました。今年はPokemon Goから始まりSuper Mario RunやNintendo Switchの発表といろんなことがあった銘柄でしたね。

 

売買記録の表示

purchase_position_20161213

自分の売買の反省材料として買った場所と売った場所を表示できるようにしました。これってありそうでない機能なんじゃないかと思います。

 

詳細データの表示

detail_20161213

チャート上でマウスオーバーするとその日の詳細データを表示するようにしました。移動平均線からの乖離率は電卓使って計算するのは面倒ですからね。

 

チャートの上下反転

reverse_20161213

自分の判断が間違っていないか確認するために反転機能を入れてみました。描いている絵にデッサン狂いがないか鏡で反転させて確認するのと似ていますね。

 

出来高を背景に表示

volume_bg_20161213

出来高を価格帯で背景に表示しました。出来高が多い場所は値動きが鈍くなるものですが、それが視覚的にわかりやすくなったかと思います。

ビジュアル以外にも日経平均との相関係数を計算したり、傾向やパターンを統計的に調べられる関数を書きました。実際に使うことでだいぶ実用性の高いプログラムになってきました。

Stock Chart #2

チャートプログラムの進捗を動画にしてみました。

全体的に何もない状態からパラパラとアニメーションをさせていますが、本来なら一回で描画するモデルの頂点数を調節することでアニメーションしているように見せています。

 

ポートフォリオ

stockchart_20160919222306

保有している株の割合を視覚的に知りたいなと思うことがあったので円グラフを作ってみました。証券会社のポートフォリオページって意外と数字だけで殺風景なんですよね。まだまだ視覚的に楽しくできる余地はあると思います。(画像は適当な銘柄を適当な価格で入れてみたものです)

 

チャート

stockchart_20160917_volume_animation

チャートを時間軸でスライドさせられるようにしました。これで右に表示している価格別出来高の推移が視覚的にわかるようになりました。これをやりたくてこのプログラムを始めたようなところがあるのでまずまずの目標は達成できたかな。チャートを動的に観察出来るようにすることが最終的な目標で、複雑怪奇な株価の力学を少しでもわかりやすくしてみたい。

 

指標

stockchart_20160920174705

NYダウや為替も別の場所から情報を取ってきて表示させるようにしました。どこのCSVデータも基本的に始値、終値、安値、高値が書かれているので、一度仕組みを作ってしまえば読み込むのは簡単です。

Stock Chart

任天堂株のPokemon Goによる急騰急落のチャートを見ていたらチャートプログラムを作ってみたくなったので基本だけ作ることにしました。

 

stockchart_20160810143953

株価データのCSVファイルを配信しているサイトを見つけたので、これを利用して作ってみることにしました。まずはCSVファイルをネットから読み込む仕組みから作り、株価の終値を線グラフで描画してみました。同じ要領で移動平均線も描画。

 

stockchart_candlestick_20160811

はじめは線グラフでいいかなと思っていたのですが、やはり窓開けを確認するためにローソク足チャートを作ることにしました。これだけで急に株価チャートっぽくなりますね。

 

stockchart_20160809235954

出来高も表示してみました。自分が特に大事だと思っている価格別出来高も右側に表示するようにしました。売り圧力や買い圧力がある程度視覚化できます。売買代金を出来高で割ったその日の平均株価を価格帯で割り振るという計算をしました。

 

stockchart_20160811121750

標準偏差を使って値動きの幅を表すボリンジャーバンドも作ってみました。相場が膠着状態だと幅が狭まり、動くと広がっていきます。移動平均線からどれだけ価格が離れているかを過去にさかのぼって偏差を調べ、その値をバンド幅で表すという計算式です。

 

stockchart_companylist

検索機能もつくりました。アルファベットの上場企業リストを見つけられなかったので海外サイトからスクレイピングで取得しました。東証の1部と2部だけで2500社ぐらいあります。自分の知っている会社なんてほんの一部なんだなと思います。

 

stockchart_20160816130340

検索中に候補を表示するような仕組みにしました。これで検索から結果表示までの基本的な流れの仕組みが出来ました。

自分で作ってみると仕組みがわかって面白いものですね。大雑把に概要を理解しているつもりでも数式で理解するのとでは納得感がだいぶ違いますね。一般的なチャートを見ながら「こんな機能があればいいのに」とか「こんな見せ方をしたらわかりやすいのに」とか思うことがあるので自分で機能を作っていこうと思います。

Wildlife #1

引き続き、学生時代に上手く描けなかった絵をPhotoshopを使ってやり直していきます。

パステルの授業を取っていた頃、パステル専門誌で紹介されていた動物画専門の画家に影響を受け、動物園へ写真や動画を撮りに行き、真似して描いたりしていました。

african_elephant_20160406g

何度も描いては失敗してきたアフリカ象。絵は細部にとらわれて全体を見ないと大体ダメになるんですよね。ついつい皮膚のシワなど細かい部分を気にしてしまいがちですが、後回しにしながら描きました。

 

rhino_20160409d

毎回描けば上手くなるわけではないですが、描かないと発見することもないので結局のところひたすら描くしか上手くなる方法はないですよね。ひとつの小さな発見のために何枚もの犠牲があるような感じでしょうか。

Space Program #1 万有引力

そろそろ宇宙空間にも進出していこうと思います。昔からやってみたいと思ってはいたのですが、数学が難しそうという思い込みでなかなか始められず・・・。重い腰を上げたきっかけは少し前に読んだ探査機はやぶさ2の地球スイングバイの記事でした。宇宙船は基本的に燃料を節約するために慣性で飛んでいて、惑星の引力を利用して軌道や速度を変えたりしているのですが、記事を読んで、どのように軌道の計算をしているのか興味がわいてきました。

宇宙空間の物理法則はあまり理解していないので初歩的なところから始めてみました。惑星を配置して衛星を回すことが今回の目標です。

 

万有引力

universal_gravitation_20160215

まずは宇宙空間の環境をつくります。万有引力の公式を見ると重力の大きさは距離(半径)の二乗に反比例するという意味になっていますね。なぜそうなるのかはわかりませんが、逆二乗ということはおそらく重力は音のように球状で広がっていく力なのでしょう。

地球の質量5.972 x 10^24kg、半径6,371kmを使って計算すると

5.972 * 10^24 * 6.67 * 10^-11 / 6371000^2 = 9.819943

ご存知の重力加速度9.8m/s^2が導き出されます。

地上400kmを飛ぶ国際宇宙ステーションにかかる重力加速度は8.69m/s^2となり、月が地球から受ける重力加速度は距離が384,400 kmなので0.0026m/s^2になります。

 

衛星と第一宇宙速度

ISS(国際宇宙ステーション)が地球を回っているのはエンジンを噴かして飛んでいるわけではなく、地球に落ちない速度で動いているからです。このギリギリ落ちない速度を第一宇宙速度といい、円運動を理解することで計算できるようになります。

angular_velocity_20160215

はじめに角速度です。一定の半径で回り続ける場合、弧の長さは角度(ラジアン)×半径となります。この場合、弧の長さが速度になりますね。

 

centripetal_force_20160214b

つぎに向心力、つまり速度ベクトルが円運動をするために必要な加速度を求めます。この中心に働く加速度がないと速度ベクトルはまっすぐ進むことになります。ハンドルを切って横方向に力を加えるようなイメージをするといいかもしれません。求め方は微小時間で考えるとわかりやすくなります。

 

first_astronautical_velocity_20160214

重力加速度と向心力の式をまとめると円運動をするための速度、つまり第一宇宙速度の式になります。高度400kmのISSに必要な速度は7.642km/sになり、月が地球へ落ちないために必要な速度は、地球からの距離が384,400 kmなので1.018km/sになります。

 

実装

プログラムは極力シンプルな構成で始めることにしました。地球を原点に配置して地球が静止しているという状態にし、地球のまわりに衛星を飛ばします。物体の座標は毎秒速度ベクトルで移動し、この速度ベクトルに地球からの重力加速度が加算されるという仕組みです。

satellite_20160211115233

画面をクリックすることでカメラ位置から隕石を飛ばせるようにしました。地球を周回する軌道に乗せるのは意外と難しいです。

 

satellite_20160213163633

第一宇宙速度で飛ぶ衛星です。ISSと静止衛星、月を配置しました。静止衛星は地球の自転に合わせて回る衛星で、たとえば日本の気象衛星ひまわりはこの軌道を飛んで日本上空を観測し続けています。角速度を地球の自転角度に合わせることでこの軌道に必要な距離と速度を計算できます。

 

地球の重力を振り切るほどの速度がない衛星は地球の周りを楕円軌道で回り続けます。地球に近づくほど速度が増し、離れるほどゆっくりになります。ちょうど地上から真上に向かって物を投げる運動に似てますね。地面がないのでずっと回り続けるわけです。よくSF漫画や小説に出てくる「重力に囚われた」という表現はこういうことだったんですね。

つづく・・・

 

※動画は60~1800倍の速度で動かしています。

参考資料

「チャート式 新物理」 円運動と万有引力(155~162ページ)
http://www.amazon.co.jp/gp/product/4410118420

Railway Map #2

前回から路線を拡大して京都から神戸まで広がりました。阪急の主要路線である神戸線、宝塚線、千里線を追加。阪急の路線図みたいになってきましたね。

 

座標単位

train_20160117001434

駅をきちんとした基準で配置したかったので座標には緯度と経度を使うことにしました。中心座標を経度135.6°、緯度34.9°として相対的に駅の座標を計算しています。ちなみに駅の座標はWikipedia等に載っています。グリッド1マスの幅は0.1度としました。

 

地図情報

train_qgis_kyoto

緯度と軽度で正しい座標に駅を配置したので実際の地図を重ねてみたくなりました。国土地理院が地図のデータを公開しているので利用してみることにしました。データを利用するには名前と住所を登録する必要があります。基盤地図情報ビューワもダウンロードして開くことが出来るようになりますが、データも膨大な上、若干扱いにくいツールなので、オープンソースのGISソフトのQGISを使いました。基盤地図情報ビューワからデータをエクスポートしてQGISで読み込むという流れで背景の地図画像を作成しました。

 

train_20160103231155

基盤地図情報から取得したデータを重ねて、駅の位置が実際の地図と合っていることを確認して一安心。地図は縦横比が1:1になる正距円筒図法を使っています。日本は赤道より北に位置するので本当は横幅(経度)は縦幅(緯度)より若干短くなります。その辺は大目にみることにします。

 

インターフェイスデザイン

train_20160117004326

そろそろGUIに取り組んでいこうと思います。テキスト以外にもラインや矩形、アイコン等、UIに使われる要素を作っていきます。汎用性を考えてモデルではなくコードで頂点を生成してポリゴン描画する仕組みにしました。

 

icon_font

アイコンはフォントと同じ要領で画像をたくさん並べたテクスチャーシートを使っています。矩形のポリゴンを作って利用するアイコン画像のUV値を指定して表示させています。

 

train_20160117004340

ワイヤーフレームで表示するとこんな感じですね。これらのHUD要素のモデルは背景モデルを描画した後に別のカメラで上書きする形でレンダリングします。違う空間のものとして扱う感じですね。

 

train_20160117005214

背景と重ならないように、背景モデルを描画した後にガウスブラーをかけて、深度バッファーをクリアしてからHUD用モデルを描画します。

 

bokeh_hexa

最後に一工夫、メリハリをつけるためにレンズのボケ画像をポイントスプライトで描画してみました。

 

こちらは操作している様子を収めた動画です。

Railway Map

昔からあったらいいなと思っていた俯瞰で見た路線図を試作してみました。時刻表や乗り換えのアプリはたくさんありますが、シミュレーションゲームのように路線全体を視覚化したようなものは見たことがありません。次の電車やその次の電車が今どの辺にあるか把握できればタイミングよく会社を出てスムーズに電車に乗ることが出来るだろうなと思うことがよくあります。

現在京都に住んでいるので自分がよく利用する阪急京都本線、阪急嵐山線、地下鉄烏丸線を再現してみました。

 

Webスクレイピング

きっと時刻表のAPIやXMLはどこかに公開されているだろうと思っていたのですが、これが全然見つからず・・・。ネット上で同じようなことをやろうとしている方々の情報を見た限り、どうも時刻表のサイトからスクレイピングするしか方法がなさそうなので、PHPを使ってHTML構造から必要な情報を取ってきてXML形式に書き換えるコードを書いてみました。(PHPは大学生の頃にウェブデザインに使っていました。いろいろと言われている言語ですが、なんとなく書いたいい加減なコードでもなんとなく動くのでこういう時は便利です。)

いろんな時刻表サイトがありますが路線時刻表がある「えきから時刻表」を利用しました。(サーバー負荷を考えると罪悪感がありますが、スクレイピングするのは時刻表データを取得するための一度きりです!)

xml_format_20160102

こんな感じで止まる駅とその時刻をHTMLのテーブルから抜き出してXML形式に変換しました。京都本線の上りだけでも時刻だけで1万行近くのデータになったのでウェブサイト見ながら手打ちで時刻を入力するのは考えただけでも気が遠くなりますね。

 

プログラミング開始

駅の情報を配列にしたXMLデータとスクレイピングした路線時刻表を整理した車両のXMLデータを使って車両を路線上に配置します。

class_stations

駅クラスは名前や座標などの情報を格納してあります。

class_trains

電車クラスは止まる駅や通過する駅、その時刻などの情報を起動時に計算して格納してあります。通過時刻はさすがに時刻表からはわからないので、距離から補完した時刻を計算しました。

railway_20151223031238

時間のスライダーを動かしてその時刻通りの座標に電車が配置されるようにしてとりあえずの目標は達成です。電車の動きは駅と駅の間を線形補完して移動させていますが、サインカーブを使って停車している感じを出しています。

普通列車が待ち合わせして快速や急行に抜かされていく様は面白いし、よくスケジュールされているなと感心します。同一時刻の線路上に何本の電車が走っているか確認できただけでもなんだか嬉しくなりました。想像以上に短い間隔で電車は動かされているものなんですね。

つづく