矩阵用不同的颜色javascript

Question

我需要创建一个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);
}
}

根据需要更改MINIMUM_DISTANCE。这些数字的解释见这里。

然后你需要把颜色对象转换成一个组件数组，在数组的末尾有颜色字符串。

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