Railway Map

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

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

 

Webスクレイピング

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

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

xml_format_20160102

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

 

プログラミング開始

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

class_stations

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

class_trains

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

railway_20151223031238

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

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

つづく

クラメルの公式の図形的意味

交差判定の記事でクラメルの公式を扱いましたが公式については省いていたので解説してみようと思います。クラメルの公式が図形的にどんな仕組みになっているのかを視覚化してみます。

まずはクラメルの公式とは何かというと・・・

2x + y = 8
x + 3y = 9

といった連立方程式を代入や消去法を使わずに

x = (8*3 – 1*9) / (2*3 – 1*1) = 3
y = (8*1 – 2*9) / (1*1 – 2*3) = 2

と係数の四則演算だけで求めることが出来る便利な公式です。交差判定では三次元での計算を扱いましたが、今回はわかりやすさを考えて二次元で解説していきます。

cramer_2d_20151121

これがクラメールの公式です。detという式を使っていますが、これはdeterminant(行列式)という意味になります。

 

行列式とは?

determinant

まずクラメルの公式に使われている行列式が何を意味しているのかですが、答えを先に書いてしまうとこれが意味するものは2つのベクトルが成す平行四辺形の面積です。

図形にして見てみます。

determinant_graph_20151122

ベクトルの成分同士を掛け合って引き算することで上手く平行四辺形の面積になっていることがわかると思います。クラメールの公式はこの考え方を基本に成り立っています。

 

連立方程式を図形化してみる

連立方程式はベクトルの形にしてみると、平行四辺形の関係になります。

cramer_parallel_20151127

ベクトルaをx倍して、ベクトルbをy倍したものがベクトルcという関係になることがわかると思います。連立方程式が表していることがちょうど平行四辺形になるんです。

 

クラメールの公式を分解していく

cramer_2d_20151121

クラメルの公式ではxやyを行列式を利用して求めます。公式を見るとxの値は「ベクトルcとベクトルbが成す平行四辺形」を「ベクトルaとベクトルbが成す平行四辺形」で割ることで求まることになります。

ではその様子を図形的に表してみます。

parallel_cramer_xy

ベクトルの方向に伸びた平行四辺形を基本となる平行四辺形で割った値がそれぞれxとyになるということがわかると思います。図にすると関係性がわかりやすくなりますよね。

 

cramer_3d

3次元でのクラメル式は計算量は多くなりますが、平行四辺形が平行六面体になるだけで概念は同じです。こうしてみるとエレガントな公式ですね。

 

参考資料

線形代数を学ぶならこの本がおすすめです。1章から3章までで行列式や内積、外積を視覚的に理解することができます。

「ゼロから学ぶ線形代数」 1章(26~36ページ)
http://www.amazon.co.jp/gp/product/4061546538

Modeling T-72 #2

t72_20151024025406

T-72のテクスチャーを描き始めました。相変わらずテクスチャーを描いているとテクセルが足りないことに気が付いてUV展開をやり直したりしています。

t72_20151024033649

反応装甲は不均一に並べると自然な感じに見えるようになりました。反応装甲のスペキュラーの反射具合で格好良く見せられそうです。テクスチャー作業は半分ぐらい終わったところ。

t72_20151024034106

ロシアなど特定の国ではなく、東欧のどこかの国のT-72戦車という設定で進めていきます。

つづく

反射ベクトル

ふとステルス戦闘機の記事を読んでいたらレーダー波を反射するビジュアルを作ってみたくなりました。

stealth_20150720175913

ステルスといえばこの機体、F-117Aをさくっとモデリングしてレーダー波を照射!前方から浴びせたらほぼすべてを後方に反らしました。

stealth_20150720175120

でもこんなふうに傾けるとレーダーの方向へ跳ね返してしまいます。つまりステルス戦闘機がステルス性を発揮するには常に水平飛行をしていないとならないわけですね。

stealth_20150720175408

レーダー波はモデルに当たると反射ベクトルで跳ね返ります。尾翼に当たった光線が機体から上空へと跳ね返っていく様子がわかると思います。念のため4回までバウンスするようにしてみました。

反射ベクトル

dot_parallel_20150726

以前壁に平行なベクトルについて書きました。進行方向のベクトル(F)を内積をつかって法線に投影してベクトルを求め(aN)、それらを足したベクトル(F + aN)が壁に平行なベクトル(P)となりました。

dot_reflect_20150726

反射ベクトル(R)は平行ベクトル(P)と進行ベクトルを法線に投影したベクトル(aN)を足すだけです。図の右側の三角形を見ればわかりやすいかと思います。反射ベクトルは関数を使えば簡単に求めることができますが、やっぱり仕組みは知っておきたいですよね。

というわけで、モデルのステルス性がどれだけあるのか調べられるツールが出来ました。あまり意味ないか。笑

Modeling T-72

もう戦車は作らない!と決めていましたがハードディスクの整理をしていたらモデリングが8割ぐらい出来上がっているT-72を発見しました。せっかくだし完成させようかと思います。じつはこれ2年前に10式戦車と同時に敵役としてモデリングしたものなんですよね。存在をほぼ忘れていました。

 

t72_20150621_02

いつもと同じように戦車だけを作っても面白くないので今回は模型でいう「情景」的なものを目指そうと思います。搭乗員を乗せてみたり。

 

t72_20150621_01

T-72の特徴といえば、やっぱりその悪そうな外見です。リアクティブアーマーも鎧みたいで格好いいです。悪役感を出せれば成功かな。

 

t72_20150625_01

T72は装備が戦車ごとにカスタマイズされていたりするので自分好みの組み合わせにしてみようと思います。スモークディスチャージャーなどを加え・・・

 

t72_20150711142612

ビューワにてレンダリングしてみました。

まだまだ作るものが多いですが気長に続けていく予定です。

つづく

猫の毛色

休日にGame Jamのイベントが近くであったので中途半端に参加して隅っこのほうで一日集中して猫の毛色プログラムを作りました。

きっかけは3年ぐらい前ですが、近所に野良猫の多い公園があり、そこで毎晩ボーッと考え事をしながら何気なく野良猫の観察をしていました。ちょうど夏が始まるくらいの季節に子猫がたくさん生まれたのですが、黒猫がトラ猫や三毛猫の子猫を連れて歩いているのを見て不思議に思いました。それまで猫のことはよく知らず、黒猫からは黒猫、トラ猫からはトラ猫が生まれるのかなと単純に考えていました。

 

cat_in_parkjpg

調べてみると、猫にはいくつかの毛色の遺伝子があり、その組み合わせで成り立っていることがわかりました。もしシミュレータを作れば、親猫の組み合わせからどんな子猫が生まれるかとか、子猫の父親を推測したりとか、そういったことがわかりそうで面白そうだなと思いました。

 

cat_20150517214447

一日で作るため、ローポリゴンモデルにしました。ローポリのほうがシュールさがあってかわいいですよね。また扱う遺伝子も代表的なものだけにしました。

 

親猫から子猫を推測する

cat_20150517224249

親猫を設定したら、子猫を生成していきます。遺伝子コードを見てもらえばわかると思いますが、親からそれぞれひとつずつ遺伝子を受け取り、優勢か劣勢かでその効果が発現したりして、毛色が決まるようになっています。黒猫の母親と茶白の父親から、キジ猫やキジ三毛、白黒が生まれていますね。

遺伝子はいくつか簡単に説明するとこんな感じです。それぞれに優先順位があり、大文字が優勢、小文字が劣勢です。
W遺伝子:白くする
O遺伝子:茶色にする
A遺伝子:トラ柄にする
S遺伝子:胴体の一部や四股を白くする

 

cat_20150516224716

親が白猫と黒猫ならなんとなく納得の結果に。

 

cat_20150517230436

両親がトラ柄なら、子猫もトラ柄になる可能性が高くなります。

 

父猫を推測する

公園にいた猫の母と娘たちですが、父猫は子育てせずにどっかに行ってしまうのでわかりません。うーん、気になる・・・!

cat_mother

母猫(キジトラ)

cat_kitten_01

子猫(キジ三毛)

cat_kitten_02

子猫(キジ二毛)

cat_20150519223553

ここでプログラムを使ってみます。左上に生まれる子猫の可能性(%)を表示しています。いろいろ試していると父猫が茶白の時だけキジ二毛とキジ三毛が生まれることがわかります。父猫が茶白の可能性がかなり高いですね。

そんなわけで完全に趣味プログラムでしたが、一部の野良猫観察愛好家(?)には需要があるのではないかと思います。アプリ化して誰でも触れる形で配布してみたいですが、すべての猫に対応するには労力が必要なので、どうなるかわかりません。

またそのうち身近で気になった現象をプログラミングで再現してみたいと思います。

 

参考資料

毛色の遺伝子に関してはこの本を参考にしました。ずいぶん古い本なので中古でしか手に入らないかも。

「ネコの毛並み―毛色多型と分布」
http://www.amazon.co.jp/gp/product/4785386339

Color Wheel

思うところがあり、カラーピッカーを作りました。

colorwheel_20150510020648

数年前の話ですが、デジタルペインティングのためにPhotoshopでカラーピッカーを作りたいと思っていたことがありました。結局作るコストが掛かりそうなのと有料でそこそこ使い勝手がよいものがあったので購入してしまいました。ただ、これぐらいなら自分で作れそうなのにな、作ってみたいな・・・とは思っていました。

そんなわけで、すぐに作れそうなXNAでやってみることにしました。HSV(色相、彩度、明度)の三角形のカラーピッカーです。

 

colorwheel_20150509150645

幾何学的な形状なので直接コードでポリゴンを描画しています。色は頂点カラーを使っています。ネットにカラーピッカーの計算式などが見当たらなかったので自分なりに考えながら実装していきました。まあ、こんなもの作る人は滅多にいないですよね。

 

color_picker_triangle_to_color_20150509

まずは出力。三角形がクリックされたときにその座標に当たる色を求める計算。三角形の交差判定を取り、得られたベクトルの比率(u, v)から三角形の各頂点の色の中間色を計算します。以前頂点カラーについて書いた記事と同じ方法です。

 

color_picker_position_from_color_20150509

つぎに入力。選択された色から座標を求めるには、選択色をHSVに変換して、v1からv2のベクトル上に彩度Sの比率で座標v3を求め、v3とv0を結んだベクトル上に明度Vの比率で目標座標を計算します。

これでカラーピッカーが入出力に連動して機能するようになりました。

 

colorwheel_20150510184929

将来的に何かツールを作るときにインターフェイスとして利用できそうです。