メモの穴

メモ化

GitHubのContributionsをthree.jsで表示

概要

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も勉強しないといけないなと感じた.

Vue.js+Electronでチャプターを設定できるYouTubeプレイヤー

まだ完成していない.

 

概要

自分自身,YouTubeで同じ動画を何回も見る上に,1つの動画内でも同じ箇所を無限に見るタイプなので,自分で自由にチャプターを設定したかった.

 

せっかくなのでVueの勉強がてらそういうYouTubeプレイヤーを作っている.ついでにVuexやElectronにも入門した.

 

ソースコード

github.com

 

できること

例としてこちらの動画を再生する.

【KINGDOM HEARTS III】 D23 Expo Japan 2018 Trailer - YouTube

 

再生中はこんな感じ.動画だけが見えるようにしている.右下のYouTubeマークは一時停止中だけ表示される.

f:id:memonoana:20180323202921p:plain

 

画面上部にマウスを持っていくと上側のバーが表示される.

真ん中の検索欄にYouTube動画ページのURLを入力して検索ボタンを押すことで動画を再生する.

f:id:memonoana:20180323203035p:plain

 

左側のメニューボタンを押すと視聴履歴が表示される.サムネイルをクリックすると動画を再生する.

f:id:memonoana:20180329225834p:plain

 

画面下部にマウスを持っていくとコントローラが表示される.

動画の再生と一時停止,音量の調整,シークバーの移動ができる.

右下の+マークのボタン(チャプターボタン)でチャプターを設定できる.チャプターボタンを押した時の再生時間をチャプターリストに追加する.

f:id:memonoana:20180329230038p:plain

 

チャプターボタンの右隣にある三角ボタンを押すとチャプターリストが開く.再生時間を選択することでその時間に移動する.チャプターリストを開かないと選択できないのは面倒なので,リストを開かなくてもチャプター移動できるようにしたい.

f:id:memonoana:20180329230120p:plain

 

ウィンドウの移動は再生画面をドラッグ.本家みたいに画面クリックで再生/一時停止の切り替えはできない.

 

今後やっていくこと

  • チャプターの選択方法を検討する
  • 再生リストを扱えるようにする(2018/04/21対応)
  • 動画タイトルを表示する(2018/04/21対応)
  • アプリのアイコンがElectronデフォルトのままなのでどうにかする

 

デレステのイベント計算機(アタポン形式)

 

以前自分用に作ったイベント計算機をここに吐き出しておく.

ページ: https://jagpotato.github.io/calc-event/

 

このページの情報が古くなっていたのを更新(2018/12/02)

memonoana.hatenablog.com

 

以下,更新前の情報

 

画面はこんな感じ.

f:id:memonoana:20170921214135p:plain

目標ポイント,累計ポイント,所持アイテムを入力してSUBMITボタンを押すと,

f:id:memonoana:20170921214328p:plain

この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にコピーする.これで物理演算が適用されるようになる.

 

参考

・ Cannon.js

・ Three.jsでCannon.jsを使う - Qiita

・ CANNON.jsを使って3Dに物理演算を持ち込む | CSS-EBLOG

 

three.jsで関数のグラフを描画

やること

three.jsの勉強がてら3D空間に関数のグラフを描いてみる.three.jsのバージョンはr86. 

3D空間の基本的な設定

まずはthree.jsを使う時には毎回やることになる流れから.シーン,カメラ,ライト,レンダラーを設定してレンダリングを行う. 

環境光やOrbitControlsは好みで.ちなみにOrbitControlsはマウスを使ってカメラを操作できるというもの.

これで何かを表示する準備が完了.ページを見ると背景だけが表示される.

f:id:memonoana:20170625214534p:plain

 参考

・ 初心者でも絶対わかる、WebGLプログラミング<three.js最初の一歩> | HTML5Experts.jp

・ three.js / documentation

座標軸を描画

まずは座標軸を描画してみる.座標軸は矢印で表現する.

three.jsで矢印を描画するためには,ArrowHelperを使う.

10行目のmaxXには,関数y=f(x)を描く際の,xの最大値が入っている.x軸を描くにあたって,正負ともにxの最大値まで軸を伸ばすようにした.ここで,ArrowHelperを使って矢印を描くと矢印全体の長さに矢印の頭も含まれてしまい,xの最大値と矢印の頭が重なってしまうため,16行目で矢印を設定する際に矢印の長さを調整している.

Y軸とZ軸も同じような流れで描画する.

f:id:memonoana:20170625230947p:plain

 参考

・ 【three.jsのヘルパー解説集】 ①ArrowHelperの使い方 - Qiita

・ three.js / documentation

座標軸の名前を描画

矢印の先に軸の名前を描画する.

文字を描画するためには,FontLoaderでフォントを読み込んでTextGeometryを使う.

YとZも同じような流れで描画する.

f:id:memonoana:20170625232148p:plain

参考

・ Three.js TextGeometry (3Dテキスト表示) - Three.jsを使って、作ってみた

・ three.js / documentation

関数のグラフを描画

今回はy=a(x^3)+b(x^2)+cx+dのグラフを対象にした.

21~26行目のfor文で頂点を増やしながら直線を描画する.

y=x^2のグラフを描画.3Dでやる意味の無さ.

f:id:memonoana:20170625234041p:plain

参考

・ Three.js 線(Line) - Three.jsを使って、作ってみた

まとめ

今回は非常に単純なグラフを描画した.次はもっと3次元的なグラフを描画したい.式のパラメータも自由に設定できるようにしたいところ.