ProcessingでSocial Graphを作る

ProcessingでSocail Graphを作ってみました。自分とその友達同士の共通の友人の数を線の太さに表したソーシャルグラフです。

世にいろんなソーシャルグラフのライブラリがあるのでそれらを使えば一瞬なんだろうけど幾何学的なことを理解したくて、本を読みながら部品から一個一個全部作りました。詳しくは書かないけれどこんな感じのテクニックを使っています。

• 正N角形

• 三角関数 cos, sin

• ベジェ曲線

# コントロール的なロジックはSocialGraphというclassに集約されていて、引数はcsvファイルと、半径です。

SocialGraph(SocialGraphCsv csv, int radius)

こういうCSVを渡すとカラム数を拾って自動的に正N角形を描写して、人名や線を描写してくれます。

	Tatsuya Suzuki	Emi Ito	Bruno Barroso	Mattew Day	Maxim Dokhlov	Mehmet Bagbekleyen	Alex Yixnitsky	Stuart Gardner	Derrick May
Tatsuya Suzuki	0	50	19	10	9	11	15	2	0
Emi Ito	0	0	2	3	3	2	1	2	1
Bruno Barroso	0	0	0	4	3	17	1	2	1
Mattew Day	0	0	0	0	4	5	1	2	1
Maxim Dokhlov	0	0	0	0	0	4	1	2	1
Mehmet Bagbekleyen	0	0	0	0	0	0	1	2	1
Alex Yixnitsky	0	0	0	0	0	0	0	1	1
Stuart Gardner	0	0	0	0	0	0	0	0	1
Derrick May	0	0	0	0	0	0	0	0	0

総当たり（隣接配列）のため下半分は上半分の繰り返しであるため全て０です。1は共通の友人が私しかいないことを意味しています。



共通の友人の数は以下のURLで取得できます
https://www.facebook.com/<person A>?and=<person B>




# クラス構成

• SocailGraph: 統括コントローラ
• Coordinate: 座標を保持する
• EquilateralPolygon: 等辺三角形を描写する
• nodeNames: ノード（Facebookの例だと）の名前
• FamiliarityAsLine: 親しさを線（の太さ）で表します

nodeNamesとFamiliarityAsLineはEquilateralPolygonに依存していますが、それぞれ独立した画像として再利用可能です。

# ソースコード

まだ整えられそう。ProcessingでOOPする難しさなんかも過去の記事にまとめました。

<script src="https://gist.github.com/suzukimilanpaak/8264451.js"></script>


# 感想

java(Processing Language)を久しぶりに書いたけど、今更OOPを気軽にやれない感じだった。ProcessingでOOPしようとするのが結構めんどくさい（不可能ではない）。ので再利用制のあるコードを書いて共有するのがProcessingの世界では手間。Javaの最近の文法を知らないけど、あの言語にあるこんなしようを使えばもっと奇麗になるかも。

ソーシャルグラフは三角関数とπの組み合わせしか使わないので意外と簡単。