⚛ Solve Rubik's Cube with WebGL in 10KB.
Freecube renders and animates Rubik's Cube with raw WebGL, plus a tiny rule-based solver showing how CFOP works.
npm install freecube
import { Cube, Solver } from 'freecube'
const canvas = document.querySelector('#gl')
const cube = new Cube(canvas)
const solver = new Solver(cube)
cube.render(30, -45) // Render the cube with X and Y rotation.
cube.shuffle(20, true) // Shuffle it with animation.
solver.solve() // Generate solution with CFOP algorithm.
new Cube(canvas: CanvasElement, moves: Moves)
Main class emulating Rubik's Cube, it maintains cube state in this.blocks
and optional WebGL instance in this.gl
.
canvas
- DOM canvas element for rendering, can be null for "headless" case.moves
- Array of cube moves, .e.g.,['R', 'U', 'F']
.
(move: String|Moves, duration: number) => Promise
Animate the cube moves with single or multi move
, uses cube.move
under the hood. you can set move speed with optional durataion
args. The promise returned will be resolved on animation ends.
(coord: Coord) => Block
Get block data in the cube. coord
shapes as [0, 1, -1]
and the block returns in { positions: Array, colors: Array }
format. block.positions
is the vertex positions of the block, and block.colors
represents block colors in [F, B, U, D, R, L]
sequence.
(move: String|Moves) => Cube
Update cube state with moves passed in, uses cube.rotate
under the hood. Just use it as animate
without animation. Chain calling like cube.move('U').move('R')
is supported.
Only
F / B / L / R / U / D
and their counter moves can be used for now. "Advanced" turns likeM / r / x / R2
are not supported.
(center: Coord, clockwise: boolean) => Cube
Rotate cube face in 90 degree. center
coord is the center block of the face, clockwise
for rotate direction.
(rX: number, rY: number, moveFace: String, moveAngle: number)
Renders the cube with rX
and rY
as overall rotation, and moveFace
and moveAngle
for a cube face rotation.
(n: number, animate: false) => Cube|Promise
Shuffles the cube. Returns cube instance if animation not used, and promise on shuffle animation ends.
Rule-based module solving Rubik's Cube with CFOP algorithm.
() => Array<Moves>
Solve the cube state with all CFOP steps. Returns array of 4 series of moves.
() => Moves
Returns the moves to build a cross.
() => Moves
Returns the moves to build first two layers.
() => Moves
Returns the moves to pass OLL.
() => Moves
Returns the moves to pass PLL.
MIT