Flip the layer order on 8x8x8 cubes, and fix the web UI for them

server/static/cube-api.js

@@ -99,15 +99,15 @@ function listenToCube() {
 }
 function makeCube() {
   var SPACING = 4;
-  var SIZE = 4;
+  var SIZE = 8;
   var offset = SPACING * (SIZE - 1) / 2.0;
   var cube = new THREE.Group();
   leds = [];
-  for (var i = 0; i < 4; i++) {
+  for (var i = 0; i < SIZE; i++) {
     var layer = [];
-    for (var j = 0; j < 4; j++) {
+    for (var j = 0; j < SIZE; j++) {
       var line = [];
-      for (var k = 0; k < 4; k++) {
+      for (var k = 0; k < SIZE; k++) {
         var geometry = new THREE.BoxGeometry(1, 1, 1);
         var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
         line.push(material);
@@ -125,6 +125,10 @@ function makeCube() {
     }
     leds = leds.concat(layer);
   }
+  // The layers are reversed for 8x8x8 cubes.
+  if (SIZE == 8) {
+    leds.reverse();
+  }
   return cube;
 }
 var renderScene;

visuals/cube.py

@@ -87,7 +87,9 @@ def get_colours(self):
      9 10 11 12
      8  7  6  5
      1  2  3  4
-    The second layer reverses this ordering
+    The second layer reverses this ordering.
+
+    For 8x8x8 cubes, the layer ordering is reversed.
     """
     result = []
     for layer_index, layer in enumerate(self.grid):
@@ -100,6 +102,8 @@ def get_colours(self):
       if (layer_index % 2) == 0:
         layer_result.reverse()
       result += layer_result
+    if self.size == 8:
+      result.reverse()
     return result
 
   def set(self, pos, colour):