GitHubのContributionsをthree.jsで表示
概要
isometric-contributionsというChrome拡張が面白かったので,three.jsの練習に,GitHubのユーザ名を入力すると,Contributionsをthree.jsで描画するものをつくった.
Contributions?
GitHubのユーザページに表示されるこれ.草や芝とも呼ばれたりする.
デモ
URL:https://ghgrass-three.azurewebsites.net/
検索欄にGitHubのユーザ名を入力して検索ボタンを押すとContributionsが表示される.
検索欄の下にあるラジオボタンで表示方法を切り替えられて,
単純に立体的にしたBoxと,
ちょっと草っぽくしたPyramidがある.
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も勉強しないといけないなと感じた.
Vue.js+Electronでチャプターを設定できるYouTubeプレイヤー
まだ完成していない.
概要
自分自身,YouTubeで同じ動画を何回も見る上に,1つの動画内でも同じ箇所を無限に見るタイプなので,自分で自由にチャプターを設定したかった.
せっかくなのでVueの勉強がてらそういうYouTubeプレイヤーを作っている.ついでにVuexやElectronにも入門した.
できること
例としてこちらの動画を再生する.
【KINGDOM HEARTS III】 D23 Expo Japan 2018 Trailer - YouTube
再生中はこんな感じ.動画だけが見えるようにしている.右下のYouTubeマークは一時停止中だけ表示される.
画面上部にマウスを持っていくと上側のバーが表示される.
真ん中の検索欄にYouTube動画ページのURLを入力して検索ボタンを押すことで動画を再生する.
左側のメニューボタンを押すと視聴履歴が表示される.サムネイルをクリックすると動画を再生する.
画面下部にマウスを持っていくとコントローラが表示される.
動画の再生と一時停止,音量の調整,シークバーの移動ができる.
右下の+マークのボタン(チャプターボタン)でチャプターを設定できる.チャプターボタンを押した時の再生時間をチャプターリストに追加する.
チャプターボタンの右隣にある三角ボタンを押すとチャプターリストが開く.再生時間を選択することでその時間に移動する.チャプターリストを開かないと選択できないのは面倒なので,リストを開かなくてもチャプター移動できるようにしたい.
ウィンドウの移動は再生画面をドラッグ.本家みたいに画面クリックで再生/一時停止の切り替えはできない.
今後やっていくこと
- チャプターの選択方法を検討する
- 再生リストを扱えるようにする(2018/04/21対応)
- 動画タイトルを表示する(2018/04/21対応)
- アプリのアイコンがElectronデフォルトのままなのでどうにかする
デレステのイベント計算機(アタポン形式)
以前自分用に作ったイベント計算機をここに吐き出しておく.
ページ: https://jagpotato.github.io/calc-event/
このページの情報が古くなっていたのを更新(2018/12/02)
以下,更新前の情報
画面はこんな感じ.
目標ポイント,累計ポイント,所持アイテムを入力してSUBMITボタンを押すと,
この5つが出てくる.見て分かる通り,ゲームの計算機にあるまじき入力項目の少なさ.
下記の状況に合わせてデータを固定してある.
・ 通常ライブはLP19のMASTERのみ
・ イベントライブはMASTERのみ
・ LPは等倍消費のみ
・ 1曲の時間は3分
実際のライブ時間は長くても2分14秒とかなのでかなり多めにとっている.リザルト画面とかも含めたらこれくらいになるかな?という感じ.
ところどころアバウトなので,ポイント調整などの細かい計算はできないが,目標まであとこれくらいという目安にはなるはず.上で示した固定データくらいは気が向いたら入力項目に追加するつもり.
three.jsとcannon.jsの連携メモ
three.js(r87)でcannon.js(v0.6.2)を使う時の流れメモ.
cannon.jsの読み込み
cannon.jsでワールド作成
物理演算を行うためのワールドを作成する.
cannon.jsで箱と床作成
箱と床を作成してワールドに追加する.
three.jsの設定
シーンやカメラ,ライト,レンダラーなどを設定する.three.jsのみの場合と同様のため省略.
three.jsで箱と床作成
cannon.jsで作成したものと対応するオブジェクトを作成する.
レンダリング
最後にワールドの時間を進め,cannon.jsの値をthree.jsにコピーする.これで物理演算が適用されるようになる.
参考
・ Three.jsでCannon.jsを使う - Qiita
・ CANNON.jsを使って3Dに物理演算を持ち込む | CSS-EBLOG
three.jsで関数のグラフを描画
やること
three.jsの勉強がてら3D空間に関数のグラフを描いてみる.three.jsのバージョンはr86.
3D空間の基本的な設定
まずはthree.jsを使う時には毎回やることになる流れから.シーン,カメラ,ライト,レンダラーを設定してレンダリングを行う.
環境光やOrbitControlsは好みで.ちなみにOrbitControlsはマウスを使ってカメラを操作できるというもの.
これで何かを表示する準備が完了.ページを見ると背景だけが表示される.
参考
・ 初心者でも絶対わかる、WebGLプログラミング<three.js最初の一歩> | HTML5Experts.jp
座標軸を描画
まずは座標軸を描画してみる.座標軸は矢印で表現する.
three.jsで矢印を描画するためには,ArrowHelperを使う.
10行目のmaxXには,関数y=f(x)を描く際の,xの最大値が入っている.x軸を描くにあたって,正負ともにxの最大値まで軸を伸ばすようにした.ここで,ArrowHelperを使って矢印を描くと矢印全体の長さに矢印の頭も含まれてしまい,xの最大値と矢印の頭が重なってしまうため,16行目で矢印を設定する際に矢印の長さを調整している.
Y軸とZ軸も同じような流れで描画する.
参考
・ 【three.jsのヘルパー解説集】 ①ArrowHelperの使い方 - Qiita
座標軸の名前を描画
矢印の先に軸の名前を描画する.
文字を描画するためには,FontLoaderでフォントを読み込んでTextGeometryを使う.
YとZも同じような流れで描画する.
参考
・ Three.js TextGeometry (3Dテキスト表示) - Three.jsを使って、作ってみた
関数のグラフを描画
今回はy=a(x^3)+b(x^2)+cx+dのグラフを対象にした.
21~26行目のfor文で頂点を増やしながら直線を描画する.
y=x^2のグラフを描画.3Dでやる意味の無さ.
参考
・ Three.js 線(Line) - Three.jsを使って、作ってみた
まとめ
今回は非常に単純なグラフを描画した.次はもっと3次元的なグラフを描画したい.式のパラメータも自由に設定できるようにしたいところ.