Cube Simulator
Create your own Rubik's Cube and code it.
cube-simulator is an npm package to simulate a Rubik's cube and play with it however you want. You can move faces, redo the cube, export it in svg or print it out on the terminal.
Instalation
Open your project on the terminal and type:
npm install cube-simulator
Basic Usage
To use it, you can simply import the package and create an object.
import Cube from "cube-simulator"
const cube = new Cube()
Get the current state of the cube
To see how the cube pieces are doing, you can use one of the following methods:
getCube
import Cube from "cube-simulator"
const cube = new Cube()
console.log(cube.getCube())
This will return something like this:
[
[['L1', 'L2', 'L3'], ['L4', 'L5', 'L6'], ['L7', 'L8', 'L9']], // Face 0
[['U1', 'U2', 'U3'], ['U4', 'U5', 'U6'], ['U7', 'U8', 'U9']], // Face 1
[['F1', 'F2', 'F3'], ['F4', 'F5', 'F6'], ['F7', 'F8', 'F9']], // Face 2
[['D1', 'D2', 'D3'], ['D4', 'D5', 'D6'], ['D7', 'D8', 'D9']], // Face 3
[['R1', 'R2', 'R3'], ['R4', 'R5', 'R6'], ['R7', 'R8', 'R9']], // Face 4
[['B1', 'B2', 'B3'], ['B4', 'B5', 'B6'], ['B7', 'B8', 'B9']] // Face 5
]
getStylizedCube
import Cube from "cube-simulator"
const cube = new Cube()
console.log(cube.getStylizedCube())
This will return something like this:
Face 1
|-----|-----|-----|
| U1 | U2 | U3 |
|-----|-----|-----|
| U4 | U5 | U6 |
|-----|-----|-----|
| U7 | U8 | U9 |
|-----|-----|-----|
Face 0 Face 2 Face 4 Face 5
|-----|-----|-----| |-----|-----|-----| |-----|-----|-----| |-----|-----|-----|
| L1 | L2 | L3 | | F1 | F2 | F3 | | R1 | R2 | R3 | | B1 | B2 | B3 |
|-----|-----|-----| |-----|-----|-----| |-----|-----|-----| |-----|-----|-----|
| L4 | L5 | L6 | | F4 | F5 | F6 | | R4 | R5 | R6 | | B4 | B5 | B6 |
|-----|-----|-----| |-----|-----|-----| |-----|-----|-----| |-----|-----|-----|
| L7 | L8 | L9 | | F7 | F8 | F9 | | R7 | R8 | R9 | | B7 | B8 | B9 |
|-----|-----|-----| |-----|-----|-----| |-----|-----|-----| |-----|-----|-----|
Face 3
|-----|-----|-----|
| D1 | D2 | D3 |
|-----|-----|-----|
| D4 | D5 | D6 |
|-----|-----|-----|
| D7 | D8 | D9 |
|-----|-----|-----|
Move one Face
To move a face, you can use the move (movement: string) method that receives the move as a string parameter.
You can pass any valid cube notation for the parameter. To learn cube notation, click here.
import Cube from "cube-simulator"
const cube = new Cube()
cube.move("U")
This will move the top face.
Sequence of movements
When you want to do a shuffle or simply a sequence of movements, you can use the moves (moves: string) method which takes the movements as a string parameter. It is similar to the move (movement: string) method, but the parameter is then divided into an Array with several strings, each one moving.
You can also pass any valid cube notation to the parameter, as long as you divide the notations with spaces. To learn cube notation, click here.
import Cube from "cube-simulator"
const cube = new Cube()
cube.moves("D2 L2 D B2 D F2 U' R2 U' B2 L2 B' U2 B D2 L2 R' D2 U' B'")
Reset the cube to the initial state
When you make a few moves and want to return to the initial state of the cube, you can use the resetCube () method. This method places the cube pieces in their correct place.
import Cube from "cube-simulator"
const cube = new Cube()
cube.resetCube()
Generate a SVG of all the cube
To make a visual output of the all the cube you can use the generateSvgAllCube (). This will return an string with the XML SVG.
const cube = new Cube()
cube.moves("D2 L2 D B2 D F2 U' R2 U' B2 L2 B' U2 B D2 L2 R' D2 U' B'")
generatedSvgAllCube = cube.generateSvgAllCube()
If we render the generatedSvgAllCube the expected output is something like this:
Generate a SVG of a face
But if you just want one of the faces you can use the generateSvgOneFace (face: 0 | 1 | 2| 3 | 4 | 5). The only parameter needed is the number of the face (to know the number of the face you can use getStylizedCube() method). This will return an string with the XML SVG.
const cube = new Cube()
cube.moves("D2 L2 D B2 D F2 U' R2 U' B2 L2 B' U2 B D2 L2 R' D2 U' B'")
generatedSvgOneFace = cube.generateSvgOneFace()
If we render the generatedSvgOneFace the expected output is something like this:
Generate a SVG of a face and one layer
And also if you want one of the faces and one layer you can use the generateSvgOneFaceOneLayer (face: 0 | 1 | 2| 3 | 4 | 5). The only parameter needed is the number of the face (to know the number of the face you can use getStylizedCube() method). This will return an string with the XML SVG.
const cube = new Cube()
cube.moves("D2 L2 D B2 D F2 U' R2 U' B2 L2 B' U2 B D2 L2 R' D2 U' B'")
generatedSvgOneFaceOneLayer = cube.generateSvgOneFaceOneLayer()
If we render the generatedSvgOneFaceOneLayer the expected output is something like this:
Save SVG outputs
After create an visual output of the cube, you can export it in a local file with exportSvg (svgOutputfile: string, svg: string). This method receive at first the local path to save the SVG, and secondly the XML String (you can call there the method)
const cube = new Cube()
cube.moves("D2 L2 D B2 D F2 U' R2 U' B2 L2 B' U2 B D2 L2 R' D2 U' B'")
cube.exportSvg('./exampleImages/generateSvgAllCube.svg', cube.generateSvgAllCube())
This method simply save the XML String in a file with the fs (Node.js File System Module).
Configuring the SVG output
Background Color
getBackgroundColor
getBackgroundColor ()
Returns the current background color.
const cube = new Cube()
cube.getBackgroundColor()
Output - #000
setBackgroundColor
setBackgroundColor (backgroundColor: string)
Receives a string from an RGB code to be the new background color.
const cube = new Cube()
cube.moves("D2 L2 D B2 D F2 U' R2 U' B2 L2 B' U2 B D2 L2 R' D2 U' B'")
cube.setBackgroundColor('#aaa')
cube.exportSvg('./exampleImages/setBackgroundColor.svg', cube.generateSvgOneFaceOneLayer(0))
Exported SVG:
Faces Colors
getFaceColors
getFaceColors ()
Returns the current array of faces colors.
const cube = new Cube()
cube.getFaceColors()
Output - [ '#ff8800', '#fff', '#00ff00', '#ffff00', '#ff0000', '#0000ff' ]
setFaceColor
To change only one face color
setFaceColor (face: 0 | 1 | 2| 3 | 4 | 5, color: string)
Receives the number of the face (to know the number of the face you can use getStylizedCube() method) and a string from an RGB code to be the new color of the respective face.
const cube = new Cube()
cube.moves("D2 L2 D B2 D F2 U' R2 U' B2 L2 B' U2 B D2 L2 R' D2 U' B'")
cube.setFaceColor(0, '#aaa')
cube.exportSvg('./exampleImages/setFaceColor.svg', cube.generateSvgAllCube())
Exported SVG:
setFaceColors
To change all face colors
setFaceColors (faceColors: Array<string>)
Receive an array with 6 RGB codes to be the new face colors.
const cube = new Cube()
cube.moves("D2 L2 D B2 D F2 U' R2 U' B2 L2 B' U2 B D2 L2 R' D2 U' B'")
cube.setFaceColors(['#aaa', '#f0f', '#f55', '#66f', '#a50', '#0f0'])
cube.exportSvg('./exampleImages/setFaceColors.svg', cube.generateSvgAllCube())
Exported SVG:
