带有不同颜色JavaScript的矩阵

Question

我需要构建2D矩阵50x50代表带有随机颜色的框，但是如果彼此靠近的盒子具有相同的颜色，它们应该彼此获得不同的随机颜色，直到它不同并继续构建。

在这里，我制作了带有盒子的矩阵，它可以正常工作，但是颜色有时确实匹配：

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 （或者，不太准确，欧几里得距离）。假设您使用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);
    }
}

根据需要更改最小值距离的内容。请参阅在这里以说明数字。

然后，您需要将颜色对象变成带有颜色字符串的组件阵列。

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