キャンバス上のルービックキューブ

5×5キューブアセンブリアルゴリズムに関する最近の 投稿は、 キャンバスにキューブエミュレーターを書くことを奨励しています 。 アセンブリに関する記事の著者はOpenGLで彼のキューブを提供しましたが、私はそれがあまり好きではありませんでした。 うまくいけば、私の友人と誰かがアルゴリズムをより早く学ぶことができます。 いくつかの機能と利点：

• クロスプラットフォーム、クロスブラウザー（IEはブラウザーとは見なされません）、不要なインストーラー、およびWebアプリケーションの他の利点。
• 2×2から無限大までのブロックのサポート（エッジが非常に小さくなり、レンダリングがひどくブレーキをかけ始めるまで）。 インターフェイスは最大11×11ですが、ライブラリに制限はありません。
• 美しさのための擬似膨大なファセット。
• 無限アンドゥバッファ。
• キューブを練る可能性（シャッフル）。
• レイヤーは簡単かつ直感的に回転し、すぐに慣れます。 固定されたシフトキーまたは右ボタンでマウスを使用してキューブ全体をスピンするのはそれほど簡単ではありませんが、慣れることもできます。
• ライブラリ全体はコンパクトで、 単一のjsファイルにあり、外部の依存関係はありません。
• MITライセンスは、オープンでそれほど怖くないソースと同様に、サイトにキューブを挿入し、好みに合わせて変更できます。

開発機能について話す価値があるかどうかはわかりません。 それは多くの困難でしたが、すべてが非常に小さいです。 何らかの理由で、私は同種の座標を使用するのが面倒でした。そのため、特に、投影は直交であり、遠近法ではありません。 レンダリングモデルも少し奇妙です。 一般に、立方体は6、12、または18個の面の形式で表され、各面には最大^ 2個の要素が含まれ、各要素は正方形です。 回転中に表示される内部セクションでは、要素は面全体で1つの正方形にすぎません。 ここでは、目に見える9つのエッジが署名され、残りの9つのエッジはそれらに対称に配置されています。



非表示部分が正しく削除されるように、面を正しい順序で並べ替える必要もありました。 ここで、正しい順序は回転軸に沿っています（回転がない場合、順序は重要ではありません）。



顔のボリュームは非科学的です。キャンバスの円形のグラデーションであり、その中心は法線の方向にずれています。 正直に言うと、 BRDFによる照明はこのタスクには不当に思えました。



私が他にやりたかったことですが、怠iness：

• キーボード制御。
• マウスでレイヤーを回転する前に、回転したレイヤーを強調表示してエラーの数を減らします。 これで、マウスを回転方向に50ピクセル押したままボタンを押したままにすると、回転が始まります。 バックライトをより短い距離でオンにすると、ユーザーは時間内に停止します。 たぶんこれは必要ではない、私はめったにエラーがなかった。
• 何らかの理由で機能しない2×2キューブを修正します。 修正済み-flllnに感謝
• 透視投影を行います。
• 保存/読み込み（Cookieで可能）。
• IE6-8のサポート（おそらくexcanvasの放射状グラデーションは機能しません）。

誰かが何かをしたい場合は、してください。 コードについて質問がある場合は、お気軽にお問い合わせください。