I learned that the Rubik's cube solution is apparently a perfected algorithm, and with three.js, I thought I could display it beautifully. I thought I'd give it a try with GitHub Copilot.

What I Was Particular About

As I was making it, I thought just displaying it normally would get boring, so I came up with the concept of a cube-shaped planet and made it look like I'm observing it.
Sometimes a UFO flies by, hovers and observes it, then flies away. I also applied blur to the cube itself to represent the out-of-focus effect of a telescope.
As I was making it, I started wanting to be particular about various things, and I began thinking about making a trilogy of square puzzles. I added a start screen later and created an effect that makes it look like it's orbiting.
As a Star Wars homage, the Rubik's cube is EPISODE IV.
EPISODE V is planned to be a Tetris planet. I hope I can make it by 2027...

I've created an unnecessarily grand story as well, so feel free to read it if you're in the mood.
https://github.com/bjcrobot/star-cube/blob/main/README_ja.md

解決したかったこと

ルービックキューブが勝手にバラバラになって勝手に完成する様子をぼーっと見たいと思ったけど、探してみたけど、意外と見つからない。

なぜ作ろうと思ったか

ルービックキューブの解法は、アルゴリズムとして完成されてるらしいということと、three.js があれば、綺麗に表示できそう、ちょっとGitHub Copilotさんとやってみようかなと

こだわったところ

作ってるうちに普通に表示しても飽きそうなので、キューブ型惑星というコンセプトを思いついて、観測してるふうにしました。
たまにUFO飛んできてホバーして、観察してる風で飛び去ったり、キューブ自体もブラーをかけて、望遠鏡のピントズレを表したりしてます。
作ってるうちに色々こだわりたくなってきて、四角パズルの3部作にするかとか思いはじめて、スタート画面をあとから追加、公転してる風の演出を作ってます。
スターウォーズオマージュで、ルービックキューブは、EPISODE IV です。
EPISODE Vは、テトリス惑星の予定、2027年に作れるといいなぁ・・・

無駄に壮大なストーリーも作ってあるので気が向いたら読んでみてください
https://github.com/bjcrobot/star-cube/blob/main/README_ja.md

App featured in this article

STAR CUBE