如何从单个输入数字生成视觉上鲜明的非随机颜色?

时间:2014-03-27 19:55:41

标签: actionscript-3 colors dynamically-generated

在Flash AS3中,我将如何编写一个函数:

  • 接受一个整数(例如列表索引)
  • 根据该数字返回一个视觉上不同的十六进制颜色(并且在相同的数字下将始终返回相同的颜色)

目的是为不同长度的项目列表中的每个项目提供视觉上不同的颜色。我期望支持的最多是200左右,但我认为大多数人都不会超过20左右。

这是我的快速和肮脏的:

    public static function GetAColor(idx:int):uint {
        var baseColors:Array = [0xff0000, 0x00ff00, 0xff0080, 0x0000ff, 0xff00ff, 0x00ffff, 0xff8000];
        return Math.round(baseColors[idx % baseColors.length] / (idx + 1) * 2);
    }

没关系,但是看到一组看起来并不那么接近的颜色会更加鲜明

1 个答案:

答案 0 :(得分:0)

您可以使用支持种子的随机值生成器,这样您就可以返回相同的颜色。至于颜色,您可以构建它 - 按randomValue * 0xFFFFFF,其中randomValue介于0和1之间。并排除接近的值(颜色)。

第二个选项:使用步骤0xFFFFFF / 200构建200种颜色的调色板,使用预定义逻辑构建随机调色板,这样您就可以使用相同的颜色。

第三种选择:对于非常鲜明的颜色,您可以在每个频道中使用big jumps。示例:0xFF * 0.2 - 每个频道中有5个步骤。

第四种选择:选择HSV。它易于理解(观看图像,将色调从0旋转到360,将饱和度和值从0更改为100)如何操作参数以获得不同的颜色:

//Very simple demo, where I'm only rotating Hue
var step:uint = 15;
var position:uint = 0;
var colors:Array = [];

for (; position < 360; position += step) {
    colors.push(HSVtoRGB(position, 100, 100));
}

//Visualisation for demo
var i:uint, len:uint = colors.length, size:uint = 40, shape:Shape, posX:uint, posY:uint;

for (i; i < len; ++i) {
    shape = new Shape();
    shape.graphics.beginFill(colors[i]);
    shape.graphics.drawRect(0, 0, size, size);
    addChild(shape);
    shape.x = posX;
    shape.y = posY;
    posX += size;
    if (posX + size >= stage.stageWidth) {
        posX = 0;
        posY += size;
    }
}

public function HSVtoRGB(h:Number, s:Number, v:Number):uint {
    var r:Number = 0;
    var g:Number = 0;
    var b:Number = 0;

    var tempS:Number = s / 100;
    var tempV:Number = v / 100;

    var hi:int = Math.floor(h / 60) % 6;
    var f:Number = h / 60 - Math.floor(h / 60);
    var p:Number = (tempV * (1 - tempS));
    var q:Number = (tempV * (1 - f * tempS));
    var t:Number = (tempV * (1 - (1 - f) * tempS));

    switch (hi) {
        case 0:
            r = tempV;
            g = t;
            b = p;
            break;
        case 1:
            r = q;
            g = tempV;
            b = p;
            break;
        case 2:
            r = p;
            g = tempV;
            b = t;
            break;
        case 3:
            r = p;
            g = q;
            b = tempV;
            break;
        case 4:
            r = t;
            g = p;
            b = tempV;
            break;
        case 5:
            r = tempV;
            g = p;
            b = q;
            break;
    }

    return (Math.round(r * 255) << 16 | Math.round(g * 255) << 8 | Math.round(b * 255));
}

enter image description here

最后一个,如果你想像专业人士一样完成这项任务,this wiki article可能会对你有所帮助。