Cube Preview

Contents

• Installation
• Usage
  • Basic usage
  • Advanced usage
    • setType
    • setCubieSize
    • setSpacing
    • setColorScheme
• Contribute
• Status

Installation

yarn add cube-preview
# or 
npm install cube-preview

Usage

Basic Usage

CJS

const CubePreview = require('cube-preview');
 
const threeBythree = new CubePreview().svgString('RBLUULUBFRBDBRRBRFFDDFFRLFDBULDDFDLRURLLLDBLUFUBDBUUFR');
 
console.log(threeBythree);

Browser

<script src="cube-preview/bundle.min.js"></script>
<script>
 var threeBythree = new CubePreview().svgString('RBLUULUBFRBDBRRBRFFDDFFRLFDBULDDFDLRURLLLDBLUFUBDBUUFR');
 
 console.log(threeBythree);
</script> 

The state of the cube must be in the form

'UUUUUUUUUR...F...D...L...B...'
// or
[0, 0, 0, 0, 0, 0, 0, 0, 0, 1, ..., 2, ..., 3, ..., 4, ..., 5]

The string consists of 54 characters, 9 per face: U means a facelet of the up face color, R means a facelet of the right face color, etc.

The following diagram demonstrates the order of the facelets:

             +------------+
             | U1  U2  U3 |
             |            |
             | U4  U5  U6 |
             |            |
             | U7  U8  U9 |
+------------+------------+------------+------------+
| 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 |
+------------+------------+------------+------------+
             | D1  D2  D3 |
             |            |
             | D4  D5  D6 |
             |            |
             | D7  D8  D9 |
             +------------+

Advanced usage

setType

Set the type of puzzle to be drawn. Default is 333.

const twoByTwo = new CubePreview().setType('222').svgString('RDRBFRDFULBLDFUFBULURLBD');
 
 console.log(twoByTwo);

Pyraminx

const pyraminx = new CubePreview().setType('pyram').svgString([2, 3, 1, 1, 1, 2, 0, 0, 2, 0, 3, 3, 1, 1, 0, 2, 2, 0, 1, 1, 1, 3, 3, 3, 3, 1, 2, 0, 0, 2, 2, 3, 0, 2, 3, 0,]);
 
console.log(pyraminx);

Megaminx Last Layer

const megaLL = new CubePreview()
  .setType('minx')
  .svgString([
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    1,
    1,
    3,
    4,
    2,
    1,
    2,
    3,
    2,
    3,
    4,
    4,
    5,
    5,
    5,
  ]);
 
console.log(megaLL);

setColorScheme

Set a custom color scheme. You only need to supply the colors you want to change.

const colored = new CubePreview()
  .setColorScheme({
    U: 'Black',
    R: 'Pink',
    F: '#39FF5A',
    B: 'DeepSkyBlue',
  })
  .svgString('RBLUULUBFRBDBRRBRFFDDFFRLFDBULDDFDLRURLLLDBLUFUBDBUUFR');
 
console.log(colored);

The default color scheme :

defaultColorScheme = {
  U: 'white',
  R: 'red',
  F: 'green',
  D: 'yellow',
  L: 'orange',
  B: 'blue',
};

Status

Works for cubes from 2x2x2 to 7x7x7, pyraminx and megaminx LL.

Only output svg strings.