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

 

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

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

 

画面はこんな感じ.

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次元的なグラフを描画したい.式のパラメータも自由に設定できるようにしたいところ.