ActionScript3遊戲中的映像編程（連載二十一，第1章完）

標籤：style   blog   http   strong   io   2014   ar   cti   

1.4.3 用灰階/明度指導色彩搭配

      試著只通過調整不等於0的通道，讓上一排的色彩在灰階上保持一致，把三個顏色分別代入到心理學公式。得

      Gray(red) = r * 0.299
      Gray(green) = g * 0.587
      Gray(blue) = b * 0.114

      讓它們灰階相等，則

      r * 0.299 = g * 0.587 = b * 0.114

      可見，b值一定最大，不妨讓b取最大值255，求得r=97， g=50。把這兩個值分別應用到紅和綠兩個色塊上。

      綠色不再顯得刺眼，整體感也因為灰階的一致性而變得比之前柔和了（圖 1.32）。

      以上演算法的局限性也顯而易見，灰階永遠無法衝破0.114這個關口，因為此時最暗的藍色已經達到255這個上限，導致顏色最高只能去到11.4%的亮度，明色系無法搭配出來。想要突破這一瓶頸，給多個顏色賦值已經在所難免。
 

圖 1.32 適應藍通道的色彩搭配

      現假設要將灰階等級調整為跟綠色（#00FF00）一致，用心理學公式算得Gray=0.576 * 255 = 147。即對於R和B，都有

      R * 0.299 + G * 0.587 + B * 0.114 = 147

      由於紅色和藍色都比綠色要暗，所以不妨讓紅色的R和藍色的B都等於最大值255。

      於是對紅色而言，有255*0.299 + G * 0.587 + B * 0.114 = 147，簡化得

      G * 0.587 + B * 0.114 = 71

      一條方程，兩個未知數，無法求出唯一解，在HSB模型裡，H是我們需要拉開的，而B已經被灰階替代，所以只能試圖從S下手多加一條方程了。

      無論是HSV還是HSL，飽和度的公式都有一個共同特徵，max和min的差別越大，飽和度越高。由於#00FF00的飽和度達到了滿值，而max已經讓R通道據為已有，所以G和B就只能去佔min的位置了。

      令min=0，色彩的飽和度即達到最大值。

      先試著讓G=0，則有B * 0.114 = 71，求得B = 623，數值徹底爆了。無奈之下，只能讓B=0，此時G * 0.587 = 71，求得G = 121。

      用同樣的方法處理藍色，得到藍色的RGB數值為（0，201，255）

      把顏色值應用到色塊上，哈哈，明色系搭配出來啦，而且也蠻好看（圖 1.33）（當然這隻是按作者自己的審美標準來評價）。
 

圖 1.33 適應綠通道的色彩搭配

      同理我們嘗試在不改紅色的前提下搭配出一套中等明度的色系，會發現，在要求飽和度達到滿值的狀況下，總要有一項的數值大於255才能使灰階的計算結果跟紅色保持一致，色系搭配失敗。這也從一定程度上解釋了為什麼一個色彩鮮豔而豐富的介面裡很少會出現大面積的純紅色（GCD類型的網站除外）。

      另外，根據色相環的構成，如果想使色調更為均勻，選擇三色系的時候，最好對美學色環進行等分，比如取0,120,240這樣的三個色相，搭配為紅黃藍三色，以達到對比的和諧統一（圖 1.34）。

      灰階的另一個任務是給灰階圖上色或者是彩圖換色（實質上也是取了彩圖的灰階之後再重新上色），但考慮到要用比較複雜的代碼來實現，就先擱一下吧。
 

圖 1.34 等分色相環的色彩配置

      有了色彩的基礎知識以後，我們就可以從可視化的角度去解讀藝術編程，讓藝術的探討不再停留於碼上談兵的層次。