How to create a matrix in a loop for hittesting with colors without duplicate colors

Question

I am trying to create a matrix with color hexagons that will allow for object hit-testing. This color matrix will sit behind a regular hexagon matrix(one without the matrix cells colored). I will mouse over and check for the color in the hidden matrix to indicate which object my mouse is over so I can simulate object detection. This should be straight forward but for some reason I cannot get the expected results.

I have a parent loop which loops through creating rows of the matrix. Each iteration calls the following function to paint the hexagon(which is defined in a collection of points made available through a hexagon service).

constructor(
    private hexagons: HexagonService, 
    private state: StateService,
    private randomColors: RandomColorService,
    private drawingContextService: DrawingContextService) {
}
async DrawHexagonAsync(hidecolors: boolean): Promise<any> {
   
    const color = this.randomColors.next();

    let strokestyle = this.state.strokeStyle;
    const context = this.drawingContextService.context;
    
    console.log(color); // Look for duplicates in console

    if (hidecolors) {
        strokestyle = `#fff`;
    }

    context.strokeStyle  = strokestyle;
    context.lineWidth = this.state.lineWidth;
    context.fillStyle = color;
    context.lineJoin = 'round';
    context.lineCap = 'round';

    const points = this.hexagons.getHexagonPoints();
    context.beginPath();
    
    let x = this.drawingContextService.location.x + points[0].x;
    let y = this.drawingContextService.location.y + points[0].y

    context.moveTo(x,y);

    // move to the start point
    for (let i = 1; i < points.length; i++) {
        x = points[i].x + this.drawingContextService.location.x;
        y = points[i].y + this.drawingContextService.location.y;
        context.lineTo(x, y);
        context.stroke();
    }
    context.fill();
    context.closePath();
}

At first glance it looks like it is working and creates a lovely hex matrix like the following:

At closer inspection, I noticed that some of the contiguous items get rendered as duplicate colors. Since, I need unique colors for hit-testing this will not do. I use a color service to iterate through and create unique colors.

// color service. 
@Injectable({provideIn: 'root'})
export class RandomColorService {
    colors: string[] = [];
    index = 0;
    constructor() {
        while (this.colors.length < 5000) {
            let random = () => {
                let n = Math.random() * 256;
                return Math.floor(n).toString(16);
            }
            
            // make sure there are no duplicate colors.
            const color = `#${random()}${random()}${random()}`;
            if (!this.colors.includes(color)) {
                this.colors.push(color);
            }
        }
    }
    public next() {
        if (this.index >= 5000) {
            this.index = 0;
        }
        return this.colors[this.index++];
    }
}

Initially, I put the checking code to make sure that the colors were unique but the same duplicate color problem occurs with or without the code check. The next function just returns the unique colors as needed and moves to the next.

I even put a console.log in the code to check and I don't see any duplicate log messages, yet the colors are clearly duplicates.

Using the following function against the colors clearly indicates that the colors are not similar(but in fact duplicate)

// Gets a pixel from the canvas and extracts the color.

onclick(evt) {
  var pixelData = this.drawing.context.getImageData(evt.x, evt.y, 1, 1).data; 
  var hex = "#" + ("000000" + this.rgbToHex(pixelData[0], pixelData[1], pixelData[2])).slice(-6);
  console.log(hex);
}

rgbToHex(r, g, b) {
  if (r > 255 || g > 255 || b > 255)
    throw "Invalid color component";
  return ((r << 16) | (g << 8) | b).toString(16);
}

So naturally the question is, what am I missing?

Answer 1

The bug is in the color service. The numbers need to be padded with '0'. If the color is not 6 digits then the color change fails and the previous color is retained and used.

return Math.floor(n).toString(16).padStart(2, '0');

// color service. 
@Injectable({provideIn: 'root'})
export class RandomColorService {
    colors: string[] = [];
    index = 0;
    constructor() {
        while (this.colors.length < 5000) {
            let random = () => {
                let n = Math.random() * 256;
                return Math.floor(n).toString(16);
            }
            
            // make sure there are no duplicate colors.
            const color = `#${random()}${random()}${random()}`;
            if (!this.colors.includes(color)) {
                this.colors.push(color);
            }
        }
    }
    public next() {
        if (this.index >= 5000) {
            this.index = 0;
        }
        return this.colors[this.index++];
    }
}