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

Algorithm: Superflip -> Solved-State

Webブラウザ上でルービックキューブをアニメーション表示する方法まとめです.
ルービックキューブをアニメーションする CSS/javascript ライブラリやサイトを紹介します.私の知る限りすべて書いています (2015-03-18 時点 6個掲載)
Web上にルービックキューブをアニメーションを表示することで,文字列だけでは不足するアルゴリズムの視覚化,デモンストレーションによるWebサイトの装飾等が実現可能となります.

CSS/javascript でルービックキューブをアニメーションするといっても,手順を表示するのが目的であったり,ユーザがキューブを操作して画面上のキューブを完成させることが目的であったり,単に回転するキューブを表示させることが目的であったりと,ライブラリ/サイトによって目的は様々ですが,CSS/javascript でアニメーションを実現するというくくりで本まとめではまとめて紹介します.ご自身のやりたいことに合うように適切なものを選択して,それをベースにカスタマイズしてご使用ください.ただしライセンスには気をつけてください.

私も実際にトップページにキューブのアニメーションを配置してみました.後述するRoofpigを使用しています.

ここでは,例えばキューブ画像を表示するライブラリとして有名な VisualCube [1] のように回転アニメーションを伴わないもの,環境によって表示が不可になるjavaアプレットを使用したようなもの [2, 3, 4, 5] ,非常に完成度の高いCSSで実現されているがオープンソースでないもの [6] 等は対象外です.

[1] VisualCube (v0.5.2), http://cube.crider.co.uk/visualcube.php
[2] Virtual Cubes Rubik’s Cube | Instructions | Instructions, http://www.randelshofer.ch/rubik/virtual_cubes/rubik/instructions/instructions.html
[3] Rubik’s Cube Java Applet, http://www.schubart.net/rc/
[4] Jelinek’s Java Applet for the Rubik’s Cube Animation, http://software.rubikscube.info/AnimCube/
[5] Rubik’s Cube Java Applet program, http://ruwix.com/the-rubiks-cube/rubiks-cube-java-applet-software-program-josef-jelinek-animating-rubix/
[6] Rubik’s Cube – Google, http://www.google.com/doodles/rubiks-cube

それでは,紹介していきます.
新たなライブラリ/サイトが公開された等の情報が更新され次第,できるだけ随時このページを更新します.

Read more »

宇宙一馬鹿げたルービックキューブの解き方

去年の記事「ルービックキューブをアルゴリズムで解くということ」に続き,ルービックキューブとアルゴリズム ネタシリーズ第2弾です.
今回は宇宙一無駄な努力をしてルービックキューブを解く方法です.

無駄な努力

スピードキューバ(ルービックキューブを早く解くことを追求する人たち)には常識的に知られていることですが,ルービックキューブは容易に分解できます.

したがって,未完成状態のルービックキューブを分解して,物理的に組み上げることでルービックキューブを完成させることができます.
この一連の操作を目をつぶった状態で実行するとどうでしょうか.
それは多分一生完成しないだろうと予想されるでしょう.全くその通りです.
この手法は言い換えると次のようになります.

アルゴリズムBG:
入力: スクランブルされたキューブ
出力: 完成状態のキューブ
(Step 1) ルービックキューブのパーツを分解する.
(Step 2) 分解したパーツをシャッフルする.
(Step 3) シャッフルされた順にキューブを組み上げていく.
(Step 4) キューブが完成したら終了,完成しない場合 Step 1 に戻る.

コンピュータサイエンスを(ネタ的に)知っている人ならピンとくると思います,これはボゴソートに対応します.

ボゴソート (英語: bogosort) は、ソートのアルゴリズムの一つ。平均的な計算時間はO(n×n!)で、非常に効率の悪いアルゴリズムとして知られている。安定ソートではない。 ボゴソート – Wikipedia より

こんなの終わるわけないやんと思いますが,「無限の猿の定理」により十分長い時間をかければ完成することは示せます.
完成までの試行回数(キューブが組み上げられた回数は)は平均で $ T_{bg} = (8! \cdot 3^{8} \cdot 12! \cdot 2^{12}) / 2 = 259512019646939136000 $ 回です.
これはエッジの位置と向き,コーナーの位置と向きの全パターンの半分です.
平均がなぜ半分でいいのかよくわかりませんが,以下の文献でそう書いてあったので半分にしてます.
参考文献: Bogobogosortについて – w125のブログ

さて,1回キューブを組み立てるのに1分要すると仮定します.
すると完成するのに 259512019646939136000分 かかる計算になります.これは,493744329617464年,すなわち 493兆7443億年です.
ちなみに地球が誕生したのは46億年前,宇宙が生成されたのが138億年前とされています.

以下の文献により,「無限の猿定理」で最も例に取り上げられる,1秒間に10万文字タイプできる猿がハムレットを執筆するのに $ 10^{360790.5} $ 年要するとされていますので,ハムレットを書くのとルービックキューブを揃えるのは確率的にはルービックキューブを揃える方がずっとずっと簡単なのです.
参考文献: 時間の比較 – ニコニコ動画:GINZA http://www.nicovideo.jp/watch/nm16202721

最良で1回の試行回数で完成しますが,この確率は限りなく0に近です.最悪の場合の試行回数は無限大です.

めげない努力

一旦ばらばらに分解してから組み上げるのはさすがに馬鹿すぎるでしょう.
ちゃんとルービックキューブのパズルらしく面を回転させて完成させます.
しかし,回転させるといってもどの面をどの向きに回転させれば揃うのか一向に見当がつきません.

そこでとりあえずやみくもにトライしてみるとします.
この手法は言い換えると次のようになります.

Read more »

WCAデータベースで遊ぶ実践編「自己ベスト記録のリストを作成する」

昨年末の記事 「WCAデータベースたわむれ入門」 でWCAデータベースを用いる取っ掛かりを説明しました.
その記事はデータベースを扱うためのoverviewを重点的に書いたので具体的なWCAデータベースの操作方法までは触れていませんでした.
今回は実際に簡単なアプリケーションの開発をしながら,具体的なSQLの使い方を見ていきましょう.
ということで「自己ベスト記録のリスト」を作成します.

今回の目的

WCAの個人記録ページの最上部に出てくるような,種目ごとにSingleとAverageの記録を表示するリスト(表)を作成することを目的とします.
下の図のようなものが完成図です.

Read more »

triboxステッカー色の任意2色間類似度を計算してみた

背景

triboxストアが蛍光色ステッカーを一新するそうで,ステッカー色に関する話題です.
ステッカー色の”差”を曖昧な主観的な感覚の判断ではなく,客観的に見ることができないか考えました.
色間の類似度ってどっかで定式化されてないかなーって思って調査してみたら存在したので実際に計算してみました.

triboxステッカーの蛍光色がグレードアップします。

新蛍光色ステッカーの公式レビュー.

Read more »

Rubk’s Clock (ルービッククロック) 画像ジェネレータの紹介

この記事では,Rubik’s Clock (ルービッククロック) の画像ジェネレータを紹介します.

Rubik’s Clock の画像生成

N×N×Nキューブの画像生成ライブラリは,VisualCube などが有名ですが,Rubik’s Clock の画像生成ライブラリはあまり知られていません.
私もさっきまで知りませんでした.
WCAの公式スクランブラTNoodleやレギュレーションを管理してるGitHubのチーム Cubing のリポジトリを眺めていたらClockのいい感じの画像ジェネレータを発見したので本記事で紹介します.

こんな感じの画像が生成できます.

sampleimage-of-clock-1

Read more »

N×N×Nキューブを目隠しで解くときの記憶量考察

あけましておめでとうございます. 2015年最初の記事です.

概要

本記事では,N×N×N (2×2×2 ~ 7×7×7) キューブを目隠しで揃えるための記憶量を計算し比較考察する. キューブの記憶量に関する問題はSNS等でたまに話題になるが,この際ちゃんと定式化してみた.

現在の N×N×N キューブ目隠し解法の主流はコーナー,エッジ,センターそれぞれの3点交換(3-cycle)であり,記憶方法もそれに即して facelets (ステッカー)列を記憶する方法である. 本記事もその方法でキューブの状態を記憶する.

初めに断っておく. 同じサイズのキューブでも記憶方法の違いやキューブの状態によって記憶量が少々異なる. 本記事では,異なるサイズのキューブ間での記憶量を比較するのが目的であり各サイズのキューブにおいて厳密に記憶量を計算することはしない.概算である.

いきなり結果を示す

いきなりだが結果を示す.以下の表に,2×2×2 から 7×7×7 を目隠しで解くときのキューブ状態の記憶量を示す.
具体的な算出方法は本記事の後半に記述したので,興味のある方はそちらを参照されたい.

キューブの種類記憶量
2×2×231 bit
3×3×380 bit
4×4×4239 bit
5×5×5392 bit
6×6×6655 bit
7×7×7912 bit

Read more »

WCAデータベースたわむれ入門 [Speedcubing Advent Calendar 2014]

本記事は,Speedcubing Advent Calendar 2014 の16日目の記事です.
15日目はこうさんの「EP上下反転手順」でした.

Note: 本記事の内容はスピードキュービング競技の技術に直接的に結びつくテーマではありません.

はじめに

from-hawaii

ハワイからの更新です.

さて,これまでのWCAデータベースに関する記事として,
1) BigDumpを用いてインポートする方法2) サーバ上のデータベースを自動的に定期更新する方法 を紹介してきました.

Thumbnail of WCAデータベースのMySQLへのインポートにはBigDumpを使うと高速かつ楽 — terabo.netWCAデータベースのMySQLへのインポートにはBigDumpを使うと高速かつ楽 — terabo.net
一部のスピードキューバの方々はWCAのDatabase exportを利用されていると思います.近年の公式大会数の増大に伴って,データベースファイルが容易に扱いにくくなるレベルまでサイズが大きくなって...
Thumbnail of WCAデータベースを自動で定期更新する方法 — terabo.netWCAデータベースを自動で定期更新する方法 — terabo.net
本記事では,WCAデータベースをサーバまたはローカルに自動的に定期更新する方法を説明します.前の記事でBigDumpを用いて手動で簡単に高速にインポートできることを紹介しました.本記事はその続きです....

WCAデータベースを扱う操作の内,インポートという部分的な処理に焦点を当てて記述しましたが, 本記事ではデータベースの導入から実アプリケーションの作成までの一連流れ,全体像を説明します. WCAデータベースを使ってわちゃわちゃ遊ぶための基礎知識という位置付けです.
Web技術にちょっと興味があるけどまだ手を出せなかった方らへんを対象として想定しています.
これを機に,多くの人がWCAデータベースに触れて面白いデータやアプリケーションが増えたら楽しいなと思います.

本記事の構成は以下のようになっています.

  1. 何が必要? 環境構築
  2. データの取り込み
  3. 試してみる
  4. 実アプリケーション紹介

Read more »

WCAデータベースを自動で定期更新する方法

はじめに

本記事では,WCAデータベースをサーバまたはローカルに自動的に定期更新する方法を説明します.

前の記事でBigDumpを用いて手動で簡単に高速にインポートできることを紹介しました. 本記事はその続きです.

Thumbnail of WCAデータベースのMySQLへのインポートにはBigDumpを使うと高速かつ楽 — terabo.netWCAデータベースのMySQLへのインポートにはBigDumpを使うと高速かつ楽 — terabo.net
一部のスピードキューバの方々はWCAのDatabase exportを利用されていると思います.近年の公式大会数の増大に伴って,データベースファイルが容易に扱いにくくなるレベルまでサイズが大きくなって...

Read more »

ルービックキューブをアルゴリズムで解くということ

ルービックキューブを解くアルゴリズムについて書きます.この記事では具体的なアルゴリズムの話はありません.
(情報工学的アプローチでの見方です.ルービックキューブを解くアルゴリズムは「群論」とも深く関わりがありますが,私は情報工学系の人間なので群論は全くわかりません.)

※ この記事はルービックキューブを解くアルゴリズムの概念的なものを説明した記事です. 実際のルービックキューブを我々人間が解くやり方は以下のページをおすすめします.とてもわかりやすく書かれています.

ルービックキューブの解き方

はじめに

まず,いくら時間をかけて良いという環境のもとであればルービックキューブを単に解くということは実は非常に簡単なタスクです.
ただ,それをいかに効率良く解くか,というのが非常に重要なことで,多くの人々の興味の対象でもあります.
その手順がアルゴリズムです.
本記事ではルービックキューブを解くアルゴリズムの概念を説明した後,既存手法を 1)人間的アプローチ,2)コンピュータ的アプローチのそれぞれでごくごく簡単に分析し,自分がこれから試してみたいことをまとめます.

Read more »

WCAデータベースのMySQLへのインポートにはBigDumpを使うと高速で楽

ブログ初投稿の記事です.

はじめに

一部のスピードキューバの方々はWCAのDatabase exportを利用されていると思います. 近年の公式大会数の増大に伴って,データベースファイルが容易に扱いにくくなるレベルまでサイズが大きくなっています.(2014-11-14現在,sqlファイル約94.4MB)
エクスポートページではSQLファイルとTSVファイルが公開されていますが,これほど大きいサイズのデータを扱うとなると,TSVファイルを純粋なファイル関数やオレオレパーザで現実的な時間で操作することはほとんど不可能になってきています.
そこでSQLファイルを使用して,MySQL等のデータベースを使用するのが妥当でしょう.

公開されているSQLは差分をinsertするのではなく,テーブルをdropして1からデータを挿入するため,データ量が膨大になるにつれ,インポート時間が相当長くなるという問題があります.
さらに,php.iniでいろいろファイルサイズやタイムアウト値を制限されてると変更だったり面倒だし,レンタルサーバ等ではこれらの値を変更されることができずにインポートができないことも考えられます.
仮に変更できたとしても,phpMyAdmin等からインポートすると,1回でインポートしきれないため,途中から再開したりだとかとにかくいろいろ手間がかかりまくりです.

本記事は,BigDumpを使用すると,楽に,高速にインポートできるよ,というお話です.
データベースはMySQL前提です.

※サーバに直接ログインできる or ssh接続できる 等の環境であれば,mysqlコマンドからインポートできるので,本記事はVPS等ではなく共用のレンタルサーバでsshログインが許可されていない場合を想定しています.

Read more »