CubeScribe Wiki

Render Rubiks Cube OLL and PLL Algorithm Diagrams with HTML5 & JS

Brought to you by: fvanhoof

cubeScribe Wiki

CubeScribe

CubeScribe is a basic JavaScript class that generates diagrams of Rubik's cube faces useful in documenting Rubik's Cube algorithms

The basic idea is to provide a JavaScript class that utilizes the HTML 5 canvas element to draw OLL and PLL diagrams on the fly. This allows for dynamic resizing for use in a variety of platforms without the need to use Java or Flash. CubeScribe is designed to not require any other scripts so you won't have to worry about external dependencies such as JQuery (although I do love jQuery).

To see CubeScribe in action check out Dagwood's Buckybits Cubing Page. All of the cube images are generated using CubeScribe.

Functions

[formatAlgorithm Function]

Examples

Here is an example of an OLL diagram rendered on IE 9.
Example of an Orient Last Layer Redering by Cubescribe

CubeScribe can also do PLL diagrams. Both one and two sided arrows.

Example of a Permute Last Layer Rendering by Cubescribe

cubeScribeExample.html

This example assumes the cubeScribe.js is in the same directory as the html file.

    <html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <title>CubeScribe Example</title>
    <script type="text/javascript" src="cubeScribe.js"></script>
    <script type="text/javascript">
    window.onload = function() {
    <!-- Step 1 for any diagram is to create the CubeScribe object -->
    var myCube= new cubeScribe();
    // Pull in the enumerations for the OLL popped cubie directions
    var p = new cubeScribe().popped;    

    // Draw an OLL diagram
    // Step 2, for an OLL diagram; define which cubies are rotated
    var oll21Set=new Array(p.left,p.correct,p.right,p.correct,p.correct,p.correct,p.left,p.correct,p.right);    


    // Step 3, for an OLL diagram; draw to the HTML canvas element
    myCube.drawOllView('oll21',oll21Set);

    // Draw a PLL diagram
    // Step 2 for the PLL diagrams; define what arrows will be drawn
    var AaStroke1=new Array(1,3);
    var AaStroke2=new Array(3,9);
    var AaStroke3=new Array(9,1);

    // Step 3; for a PLL diagram is to combine the arrows into an array.
    var AaStrokes=new Array(AaStroke1,AaStroke2,AaStroke3);

    // Step 4 for a PLL diagram is to draw to the HTML canvas element
    myCube.drawPLLView('pllAa',AaStrokes, false);
    }
    </script>  
    </head> 
    <body>
    <h1> Draw OLL example</h1>
    <canvas id="oll21" width="100" height="100">OLL21 Diagram</canvas>
    <h1>Draw PLL Example</h1>
    <canvas id="pllAa" width="100" height="100">PLLAa Diagram</canvas>
    </body>
    </html>

Project Admins

Project Admins:

Frank Vanhoof