[使用P5 javascript从图像生成调色板

Question

我被要求确定图像中前5种重复的颜色。

我有以下代码，由我的老师提供

for(let j=0 ; j < theImage.pixels.length ;j++) {

    let r = theImage.pixels[j];
    let g = theImage.pixels[j+1]
    let b = theImage.pixels [j+2]


    let temp = colors.find((element) => {
        return element.color[0] == r &&
        element.color[1] == g &&
        element.color[2] == b;
    });


    if (!temp) {
        colors.push({ color: [r, g, b], amount: 1});  
    } else {
        temp.amount += 1; 
        //console.log(colors);
    }

}

我了解我如何遍历所有像素以及将元素添加到堆栈中的过程，但是我不了解如何识别前五种颜色并保存它们。我想它必须与每次找到元素时都会增加的数量计数器有关，但我什至不知道我在使用什么数组。对象？正常值？我在寻找什么以及如何保存这些值

[如果有人要检查并运行它，请在此处留下指向我的代码的链接。谢谢！

https://editor.p5js.org/isvr95/sketches/oe6efUW9r

P.D。不要运行它，它会冻结您的标签。

Answer 1

没有过多修改您的代码，我想到了这一点：

let theImage
let colors = []
function preload(){
  theImage = loadImage('https://picsum.photos/150')
}

function setup(){
  createCanvas(200, 150)
  image(theImage, 0, 0)
  theImage.loadPixels()
  
  for(let j=0 ; j < theImage.pixels.length ;j+=4) {

    let r = theImage.pixels[j];
    let g = theImage.pixels[j+1]
    let b = theImage.pixels [j+2]


    let temp = colors.find((element) => {
        return element.color[0] == r &&
        element.color[1] == g &&
        element.color[2] == b;
    });


    if (!temp) {
        colors.push({ color: [r, g, b], amount: 1});  
    } else {
        temp.amount += 1; 
    }
    colors = colors.sort((a, b) => b.amount - a.amount)
  }
  
  fill(colors[0].color)
  rect(150, 0, 50, 30)
  fill(colors[1].color)
  rect(150, 30, 50, 30)
  fill(colors[2].color)
  rect(150, 60, 50, 30)
  fill(colors[3].color)
  rect(150, 90, 50, 30)
  fill(colors[4].color)
  rect(150, 120, 50, 30)
}
/**/

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>

您的算法会存储每种颜色及其找到的次数，但是遍历像素时并未考虑到每个像素颜色的值在数组中占据四个位置（假设像素密度为1），这就是为什么将增量设置为j += 4。然后，所有需要做的就是以其对象的sort值以降序方式将colors数组amount：

colors = colors.sort((a, b) => b.amount - a.amount)
并选择前五个元素，它们将是重复最多的元素。

基本上，您正在使用包含对象的数组，该对象既包含数组又包含原始数据类型：

[
    {
        color: [],
        amount: 1
    },
    {
        color: [],
        amount: 1
    }
    ...
]
当您运行find()方法时，您正在通过匹配所有RGB值来搜索color；如果找到，则添加到其金额值：temp.amount += 1，如果未找到，则创建一个新的颜色对象并将其添加到数组colors.push({ color: [r, g, b], amount: 1})