Elm でつくるルービックキューブ

github
遊べるページ
デモ動画

Transcript

1. Elm でつくる ルービックキューブ カシフクトモヤ
2. 自己紹介
 カシフクトモヤ @tnyo43 （ @cashooooou） 普段は TypeScript と React でフロントエンドを書いてる． 2018年に初めて Elm で小さい Webアプリを作った． ポケモンが好き（このあと昨日出た新作をやる） 1 / 11
3. 作ったもの
 ブラウザで遊べるルービックキューブ https://tnyo43.github.io/elm-cubic/ デモ動画 2 / 11
4. 作り方
 1. データ構造を定義する 2. データをディスプレイに表示する 3. マウス操作できるようにする 3 / 11
5. データ構造を定義する
 4 / 11 3×3×3のルービックキューブは3種類のキューブによって構成される． コーナーキューブ （8個） エッジキューブ （12個） センターキューブ （6個）
6. データ構造を定義する
 5 / 11 回転させるとき、キューブは種類ごとに独立して考えられる． キューブの種類ごとに色と位置に番号をつけたベクトルとみなす． (本当は個々のキューブの向きも管理する必要があるのでもうちょっと複雑) type alias Cube = { corner : Array Int , edge : Array Int , center : Array Int } init : () -> Cube init _ = Cube (Array.fromList [0, 1, 2, 3, 4, 5, 6, 7]) (Array.fromList [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]) (Array.fromList [0, 1, 2, 3, 4, 5]) 0 5 2 3 1 6 7
7. データ構造を定義する
 6 / 11 回転はベクトルの順番の入れ替えとみなせる． （例）上面の回転は、 0 → 1 → 2 → 3 → 0 の入れ替えをしている 0 1 2 3
8. データ構造を定義する
 rotate: Side -> Cube -> Cube rotate side cube = case side of Top -> { corner = replace cube.corner [(0, 1), (1, 2), (2, 3), (3, 0)] , edges = replace cube.edges [(0, 3), (3, 2), (2, 1), (1, 0)] } Left -> { corner = replace cube.corner [(0, 3), (3, 7), (7, 4), (4, 0)] , edges = replace cube.edges [(1, 8), (8, 5), (5, 11), (11, 1)] } ... 7 / 11
9. データをディスプレイに表示する
 ianmackenzie/elm-3d-scene というライブラリを使用 3D のオブジェクトを canvas 要素を使ってブラウザ上に表示する． 直方体を作る Scene3d.block と平面を作る Scene3d.quad を組み合わせて 個々のキューブを作り、組み合わせる． + quad いっぱい 並べる 8 / 11
10. マウスで操作できるようにする
 マウスで操作するために，マウスとオブジェクトの位置を 頑張って計算する． 3次元座標空間のいくつかの点が canvas のどこに表示されるか計測し、変換 式を作る． 3D空間上の点をディスプレイ上の点 にうまく変換するように、 パラメータ a~h を計測 ディスプレイ上の (x, y) 3D空間上の (x, y, z) 9 / 11
11. マウスで操作できるようにする
 キューブの各頂点が表示される点が計算できるので、 convexhull アルゴリズムを使ってキューブの領域を検出する． マウスが領域の内部にあることは ray-casting アルゴリズムで検出する． convexhull 10 / 11
12. よかったこと
 数学っぽい計算が多くて楽しかった Elm の関数型言語としての良さを感じた． 自分が操作に慣れてしまうと、初見ユーザのハードルの排除を怠る． マウスでのフィードバックのうまいテストのやり方がわからなかった． わからなかったこと・難しかったこと
 11 / 11