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

Question

我被要求从图像中识别前 5 个重复的 colors。

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

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);
    }

}

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

如果有人想检查并运行它，我会在此处留下我的代码的链接。提前致谢

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

PD 不要运行它，它会冻结你的标签。

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 。 然后，需要做的就是将colors数组按其对象的amount值进行降序排序：

colors = colors.sort((a, b) => b.amount - a.amount)

并选择前五个元素，这将是重复最多的元素。

基本上，您正在使用一个数组，该数组包含同时包含数组和原始数据类型的对象：

[
    {
        color: [],
        amount: 1
    },
    {
        color: [],
        amount: 1
    }
    ...
]

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