ルービックキューブを解く（その３：解法アニメーション）

　20手で解けることがわかったので、できれば回転をアニメーションで表示したい。
 以下のサイトを参考にルービックキューブを動かす。

• Web上でルービックキューブをアニメーションする CSS/javascript まとめ 

 CSSとJavascriptでルービックキューブのアニメーションを実現するRoofpigを以下からダウンロード。

•  https://github.com/larspetrus/Roofpig 

使用方法は至ってシンプル。
まず、jQuery 3.1.1とRoofpigのソースにある「roofpig_and_three.min.js」を読み込む。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"</script>
<script src="roofpig_and_three.min.js"</script>

CSSでroofpigクラス（大きさなど）を定義し、表示したい場所に<div class=roofpig data-config=・・・>を記載する。
data-configは、回転のアルゴリズムや各面の色の指定などを行う。

<style type="text/css">
.roofpig {width:160px; height:210px; float: left; margin:4px;}
&lt/style>
<div class=roofpig data-config="alg=L' U2 L U2 R U' L' U R'|colors=F:b B:g U:r D:o R:w L:y">

上記は、正面が青(F:b）、上面が赤(U:r)、右面が白(R:w)などで、左面を反時計回り(L')、上面を2回転、左面を時計回りなどという設定。
最終的な各面の色がcolorsで指定してあるので、回転を指定することで元の位置からのアニメーションが出来上がるという仕組み。
以下、デモページ。

• http://jsfiddle.net/Lar5/MfpVf/ 

 そして、今回のWeb場での実装画面は以下。

Javascriptでルービックキューブのアニメーション。よくできてます。
徒然なるままに、今日も明日も。