具有不同顏色javascript的矩陣-有解無憂

我需要構建 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;
       })})
       
     
           
         
}

uj5u.com熱心網友回復：

您需要一種方法來確定特定顏色是否與另一種顏色太接近。一種方法是使用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)
  )
);

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/461084.html

標籤：javascript 矩阵多维数组

上一篇：將map內創建的值推送到新陣列中以減少

下一篇：表單控制元件將值作為物件陣列獲取