Rubix Solver

,

I have never been able to solve a Rubix Cube. I know there are algorithms for it, but I just can’t crack the nut. Friends and colleagues through the years have gone through the shuffle and solve, but much like juggling it is an act I am destined to watch. I could wallow in self pity or I could set about sicking technology on a people problem. It’s a pickle!

After a bit of googling it appears the first step to a machine solving D-Wade presents The Cube would be to identify the colors present. After an exhaustive few rounds of GPT-Googling interlaced with trial and error I landed on the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function detectColors(img)
{
   const canvas = document.createElement('canvas');
   const context = canvas.getContext('2d');
   canvas.width = img.width;
   canvas.height = img.height;
   context.drawImage(img, 0, 0, img.width, img.height);

   const grid = [
       [1, 1], [4, 1], [7, 1],
       [1, 4], [4, 4], [7, 4],
       [1, 7], [4, 7], [7, 7]
   ];

   const colorRanges = {
       'white': [[200, 200, 200], [255, 255, 255]],
       'yellow': [[200, 200, 0], [255, 255, 150]],
       'blue': [[0, 0, 100], [0, 0, 255]],
       'green': [[0, 100, 0], [0, 255, 0]],
       'red': [[150, 0, 0], [255, 50, 50]],
       'orange': [[255, 100, 0], [255, 165, 0]]
   };

   const colors = [];
   
   for (let i = 0; i < grid.length; i++) {
       const x = (grid[i][0] * canvas.width) / 10;
       const y = (grid[i][1] * canvas.height) / 10;
       const imageData = context.getImageData(x, y, 1, 1).data;

       const detectedColor = Object.keys(colorRanges).find(color => {
           const [r1, g1, b1] = colorRanges[color][0];
           const [r2, g2, b2] = colorRanges[color][1];
           return (imageData[0] >= r1 && imageData[0] <= r2) &&
                  (imageData[1] >= g1 && imageData[1] <= g2) &&
                  (imageData[2] >= b1 && imageData[2] <= b2);
       });

       colors.push(detectedColor || 'unknown');
   }

   console.log(colors);
   return colors;
}

The detectColors function is designed to detect and classify colors from specific points on an image of a Rubik’s Cube by analyzing pixel RGB values. It uses hardcoded predefined grid and color ranges to identify and return the detected colors. I create a canvas element, get the context for 2D drawing and draw the image (in our case the Rubix). My grid array is a set of hardcoded points normalized to align to spots roughly 10, 40, 70% through the image. This [3x3] set of (x,y) coordinates corresponds to where the colors should be.

Alongside the general grid for detection colorRanges is an object that defines RGB value ranges for the six Rubix colors: white, yellow, blue, green, red, and orange. Each color is associated with an array containing two RGB triplets representing the minimum and maximum values for that color. An empty array colors is initialized to store the detected colors.

The function loops through each coordinate and calculates the corresponding pixel’s (x,y) position on the canvas. context.getImageData(x, y, 1, 1).data retrieves the RGBA values of the pixel at the specified position. The detected color is determined by discarding that alpha quicker than ‘Rona and comparing the pixel’s RGB values against the defined value from colorRanges. Object.keys(colorRanges).find is used to find the color whose range includes the pixel’s RGB values. Which seems a bit hacky, but dang if it doesn’t work fairly well.

There are still instances where unknown pops up when detecting colors, so spending more time to shore it up before production will be required, but for now I’m satisfied. Demo in the future at some point will be part 2: