2014-03-27 40 views
2

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

它確實好,但它會很高興地看到一個更加組不同的顏色是不那麼視覺上彼此靠近

回答

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可能對你有所幫助。