メモの穴

メモ化

GitHubのContributionsをthree.jsで表示

JavaScript

概要

isometric-contributionsというChrome拡張が面白かったので，three.jsの練習に，GitHubのユーザ名を入力すると，Contributionsをthree.jsで描画するものをつくった．

Contributions？

GitHubのユーザページに表示されるこれ．草や芝とも呼ばれたりする．

f:id:memonoana:20180514143648p:plain

デモ

URL：https://ghgrass-three.azurewebsites.net/

検索欄にGitHubのユーザ名を入力して検索ボタンを押すとContributionsが表示される．

検索欄の下にあるラジオボタンで表示方法を切り替えられて，

単純に立体的にしたBoxと，

f:id:memonoana:20180514144854p:plain

ちょっと草っぽくしたPyramidがある．

f:id:memonoana:20180514144912p:plain

Pyramidは自分のようなContributionsだと荒れ地みたいになるけど，濃い緑が密集するとけっこう草っぽく見える．

実装

実装に関してContributionsの取得とthree.jsでの表示について簡単に説明する．

Contributionsの取得

GitHubのContributionsは

https://github.com/users/{ユーザ名}/contributions

から取得できる．「各日のContribution数」と「マス目の色」を取得できるのでこれらを使用する．

参考：GitHubのcontributionsをターミナルに表示してみた - Qiita

GitHubのデータを取得するのならGitHub APIからいけるのかと思ったけど，サッと見た感じすんなりとは取れなさそうだったので上記のURLから取得することに．

three.jsでの表示

three.jsはr92を使用している．

基本的には「各日のContribution数」をもとに高さ，「マス目の色」をもとに色を決定してオブジェクトを生成する．Contribution数をそのままオブジェクトの高さに反映させると，人によって画面に収まりきらない場合が出てくると考えたので，取得したContribution数の最大値を基準にして相対的に高さを決定するようにした．

Box

単純にTHREE.BoxGeometry()で作成．

Pyramid

最初は草の3Dモデルをつくって風で揺らして～ということも考えてたんだけど，そんなモデリング技術は無いしめんどくさいのでTHREE.BufferGeometry()で作成．9個の頂点でピラミッドっぽい形状をつくっている．また，ある程度揺らぎを表現するために1番上の1点の位置はランダムに決定している．ただランダムの範囲をけっこう狭くしてるのであまり違いが見られないような気もする．

まとめ

GitHubのContributionsを取得し，three.jsで描画した．そもそもデスクトップマスコットみたいなものを作成しようと飛び出したらこんなところに着地した．カメラやライトの使い方が不慣れなのでもっと学習していきたい．あと今回初めてBufferGeometryを触ったけど，ちゃんとWebGLも勉強しないといけないなと感じた．