不同颜色的矩阵 javascript

Question

我需要构建 50x50 的 2d 矩阵，代表具有随机颜色的框，但是如果彼此靠近的框具有相同的颜色，则它们应该获得彼此不同的随机颜色，直到不同，然后继续构建.

我在这里制作了带有方框的矩阵，效果很好，但颜色有时会匹配：

function onLoad(evt)
{       
        
        var matrix = [];
        

        for (var i = 0; i < 50; i++) {
            var row = [];
            for (var j = 0; j < 50; j++) {
                var randColor = Math.floor(Math.random()*16777215).toString(16);
                row.push(MyComponent(randColor));
                }
                matrix.push(row);
            }
        
        
        var newData = matrix.map(function(row) {
                return row.map(function(x) {
                        return x;
       })})
       
     
           
         
}

Answer 1

您需要一种方法来确定特定颜色是否与另一种颜色太接近。一种方法是使用 rgb-lab (or, less accurately, euclidean distance)。假设您使用 rgb-lab 的 deltaE 函数，它有两个参数，其中每个参数都是 RGB 数量的 3 项数组。

生成您的随机颜色，这样您就可以轻松获得它们组件的十进制值，这样您也可以轻松获得它们的十六进制字符串表示形式。然后迭代填充的相邻索引并比较颜色。如果它们太相似，请重试。大致如下：

const MINIMUM_DISTANCE = 25;
const getColor = () => {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    const str = r.toString(16) + g.toString(16) + b.toString(16);
    return { rgb: [r, g, b], str };
};
const matrix = [];
for (let i = 0; i < 50; i++) {
    const row = [];
    for (let j = 0; j < 50; j++) {
        let color;
        let tooClose = false;
        do {
            color = getColor();
            tooClose =
                (row[j - 1] && deltaE(color.rgb, row[j - 1].rgb) < 25) ||
                (matrix[i - 1] && deltaE(color.rgb, row[i - 1][j].rgb < 25));
        } while (tooClose);
        row.push(color);
    }
}

根据需要更改 MINIMUM_DISTANCE。有关数字的解释，请参阅 here。

然后你需要将颜色对象变成一个组件数组，最后是颜色字符串。

const arrayOfComponents = matrix.map(
  row => row.map(
    ({ str }) => MyComponent(str)
  )
);

不同颜色的矩阵 javascript

matrix with different colors javascript

javascript

matrix

multidimensional-array