2016年6月21日 星期二

Processing 基礎 ( 六 ) 彩色


         光與顏色會影響人的情緒,人類對光很敏感但是卻是色盲,比如當紅光與藍同時出現時人的眼睛就會判斷為紫色,這也就讓玩 "色"  的人有非常大的空間,只要使用三個顏色就可欺騙人類眼睛製造出全彩的效果。
     Processing 採用的是加色法,用最簡單的灰階來表示當數值是"0"的時後是黑色,隨著數值不斷的增加到最大255時就是全白。


          電腦處理彩色是由紅綠藍三個顏色依不同比例混合成其他色彩,每個顏色用八位元轉換處理,所以三個顏色值都是0~255。

 採用三顏色就可欺騙眼睛做出全彩的視覺,紅綠藍代號分別是RGB。

圖片來源:https://processing.org/tutorials/color/

 紅色(R)的數值條狀圖。

綠色(G)的數值條狀圖。

藍色(B)的數值條狀圖。

       
       Processing 還有透明度的功能數值一樣是0~255 ,0是完全透明255是不透明,下圖彩色數值都是255只改變透明度。

       
      0~255這是電腦2進位值轉成10進位的值,對於不是學程式設計的人不是很容易理解,Processing提供了一個函數colorMode()可自定數值的表示方式,例如。

     colorMode(RGB,100);

    執行這函數後RGB 的數值會改成 0~100,也可以改成自己慣用的數值比例,Processing最後都會轉換回0~255。

     RGB的顏色處理方式雖然很方便,但是因為人類感覺顏色的方式並不是線性的,藝術家們又提出了一個彩色表示方法 HSB (hue, saturation, and brightness)色相飽和度亮度,把顏色描述在圓柱坐標系內的點,這個圓柱的中心軸取值為自底部的黑色到頂部的白色而在它們中間的是灰色,繞這個軸的角度對應於「色相」,到這個軸的距離對應於「飽和度」,而沿著這個軸的高度對應「亮度」。

圖片來源:https://processing.org/tutorials/color/


    HSB 在Processing 的預設一樣是 0~255,也可以自行改數值的表示方法0~100或你想要的數值比例。

    對一般平凡夫子來說,顏色是怎麼混合出來的很難懂,Processing在工具內提供了色彩選擇器,使用方法是先選色相再選飽和度亮度,右邊就會出現對應數值,只不過很奇怪HSB表示法是360,100,100,(degrees,%,%),按底下複製得到的值是網頁設計常用的16進位表示法#D176B3。



參考資料
   https://processing.org/tutorials/color/
 https://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4

沒有留言:

張貼留言