生成不是颜色数组的颜色的最快方法

时间:2011-12-03 23:48:26

标签: javascript arrays performance optimization

我想知道解决这个问题的最佳方法是......

我有一组用户定义的颜色,它们作为rgb值被压入堆栈。我想为每个用户定义的颜色找到第二种颜色。这些第二种颜色必须与用户定义的数组完全不同,但可以是完全随机的,不需要与任何用户颜色有任何视觉关系。

生成随机rgb值并对堆栈进行测试会很快,因为随机数在第一次尝试时不太可能找到相同的颜色。或者只是从255,254,253开始并从每个值中减去1,然后针对堆栈进行测试会更好,也不太可能并且操作更少。还是其他任何想法?

3 个答案:

答案 0 :(得分:2)

以下是一些开始的代码:

var colors = [];

function getRandUniqColor()
{
    var r = getRGBString(),
        g = getRGBString(),
        b = getRGBString(),
        rgb = r + g + b;

    if ( colors.indexOf(rgb) == -1 )
    {
        colors.push(rgb);
        return {
            r: r,
            g: g,
            b: b
        }
    }
    else
    {
        return getRandUniqColor()
    }
}

function getRGBString()
{
    var num = Math.floor( Math.random() * 255 ).toString();
    while (num.length < 3)
    {
        num = '0' + num;
    }
    return num;
}

只需致电getRandUniqColor(),您就会获得RGB值的对象字面值。

注意:如果涉及很多颜色,则不应使用递归函数。

...这里是小提琴:http://jsfiddle.net/wV6Mw/

答案 1 :(得分:1)

我建议生成随机RGB值(组合三个随机数),然后创建一个函数来测量生成的随机颜色与数据结构中的颜色之间的颜色差异。如果生成的颜色与您已生成的颜色太接近,请生成一个新颜色。你必须决定你想要的随机颜色与你已经拥有的颜色有多么“不同”,但R,G和B之间只有几个点的差异将不会明显不同,所以你应该寻找一些最小值在至少一个渠道中分离。

搜索“计算rgb色差”会为您提供一系列有关如何计算两个颜色值之间有意义差异的参考。来自该搜索的link具有特定的等式,这里是关于颜色差异的previous question on SO

如果您只是想要不同颜色并且不需要/想要真正随机的颜色,您也可以根据已有的颜色生成补色。

你可以用数据形式或十六进制字符串形式生成这样的随机颜色:

// generate r,g,b data structure like {r: 255, g: 30, b: 09}
function generateRandomColorData() {
    function randomColorVal() {
        return(Math.floor(Math.random() * 256));
    }
    return {r:randomColorVal(), g: randomeColorVal(), b: randomColorVal()};
}

// generate hex string color value like FF4409
function generateRandomColorHex() {
    function randomColorVal() {
        var val = Math.floor(Math.random() * 256).toString(16);
        if (val.length < 2) {
            val = "0" + val;
        }
        return(val);
    }
    return(randomColorVal() + randomColorVal() + randomColorVal());
}

答案 2 :(得分:0)

正如其他人所说,最简单的方法可能是创建随机颜色并检查碰撞。

如果要填充色彩空间(用户选择数百万种颜色),那么另一种方法是创建256 ^ 3位的颜色立方体,让“1”代表使用的颜色。然后你可以从位置0开始,使用第一个“0”作为生成的颜色,下一个“0”作为第二个,依此类推。数据结构将超过2 MB的内存。

但随机可能是要走的路。