昨天講到了如何設定顏色以及

顏色相關可以使用的物件

P5.js有提供一些物件給developer們開發使用，如下，默認是RGB模式，但也可以使用在HSB模式喔~

• setRed

• setGreen

• setBlue

• setAlpha

範例

HSB + setRed()

假使我們今天寫了段程式如下，得到了一個紫色的圈圈，但希望紅色可以全部消除掉(變成藍色)，並在一開始設定顏色模式為HSB

於是我們可以進行以下的操作，我這邊畫了兩個圓，可以看到一開始沒有使用 setRed()的呈現和使用過得呈現

RGB + setAlpha()

另外測試了使用 setAlpha() 的範例程式，要注意的是因為動畫會一直跑，也就是 frameCount 會不斷增加，所以透明度也會被疊加(ಥ﹏ಥ)，所以這邊給了 noLoop()，讓它動畫暫停以方便顯現

顏色相關可以使用的函數

我把它分成這兩大類，第一大類型主要用於提取色素和飽和度，第二大類型用來提取飽和度和色相，至於為什麼分成兩類呢?我想大家應該很熟悉RGBA，可對RGB模式、HSB模式或者圖片操作，這也是之後可能比較常用到的函數，而二類相對少用，主要針對HSB。

1. • alpha()
   • blue()
   • green()
   • red()

2. • hue()
   • saturation()

但用法是一樣的~都是使用來提取數值的，這樣講很玄妙模糊，我們直接來看看範例

red(), blue(), green()應用

下圖我們先提取了 color(195 ,210,100) 這個顏色的紅色數值，並且把這個數值單獨畫了一個方形在隔壁，中間也有console在瀏覽器上面，大家可以看到紅色數值是195

以下是HSB 模式，大家可以發現提取出來的是RGB色的數值，也就是說第一大類的函數可以用在各種色彩模式下，返回紅綠藍的比例

像我這樣寫這一行直接填回去會變成指定HSB的色相(不同於RGB數值)，請大家要特別注意

fill(v, 50, 100)

hue()

下圖我們提取color(240, 210,100)的色調，可以看到返回240，也就是color中色相的數值

saturation()

下圖我們提取color(300 ,60,40, 0.6)的飽和度，可以看到返回60，也就是color中飽和度的數值(0.6)

小結

有關顏色的眉角很多，也起來也嘮嘮叨叨的，但還是很謝謝大家今天的觀看