# 【TEST】單元五 「增添色彩－玩耍色彩與留下痕跡」

###### tags: `互動藝術程式創作入門`

目標：了解色彩系統、色彩視覺、配色、色彩週期變化、色彩管理（色票）

### 基本概念

:::warning
顏色的變數命名，不要用 `color`，會與 p5.js 的既有名稱衝突。
:::

- 色彩模式：RGB、Hex、HTML Color Name、HSB
- `setBlue()`、`setGreen()`
操作 RGB 中控制某個數值，像水彩調色一樣，調整顏色變化。利用 `_getBlue()` 在 print() 能在 console 查看數值變化。
- `setAlpha()`
操作 RGB 中的透明度。
- 色彩變數的放置位置，在 setup() 前先宣告變數名稱，然後在 setup() 或 draw() 內給定數值，才能正常執行。

### HSB 顏色模式 (Hue 色度、Saturation 飽和度、Britness 亮度)

通常要讓色彩的呈現更漂亮，就會使用 HSB 顏色模式

- 使用 `colorMode(HSB)`
- H 是 0 - 360
- S 是 0 - 100
- B 是 0 - 100
- `lerpColor(調色1, 調色2, 比例)` 控制色相漸層範圍，不用每次都是彩虹漸層，原理是調和兩種指定顏色，成為第三種顏色。
- `blendMode()` 利用光線疊加原理，產生質感效果。如果同時要在 draw() 內使用 background，要記得在 background 前設定 blendMode(BLEND)，才會有效果。
- blendMode(MULTIPLY)
- blendMode(LIGHTEST)
- blendMode(SCREEN)

## 色票管理

使用陣列，將要的色票號碼或名稱放入`var arr = [資料1,資料2,資料3,資料4, ...]`，操控陣列位置選擇想要的顏色。

1. 先宣告ㄧ個陣列的色票：`var colors = ["#E4572E","#17BEBB","#FFC914","#2E282A","#76B041"]`
2. 選取裡面的顏色

    //隨機選取
    var clr = random(colors)
    fill(clr)
    
    //指定選取
    var clr = colors[0] //取用第ㄧ個色票
    fill(clr)

## 期末作業發想
- 宇宙的衛星航道
- 切片蘋果螺旋形狀

**進階**
- 往下甩顏料後，顏料噴色搭配古典樂節奏
- 利用滑鼠、鍵盤各種不同操作（作為樂器），創作畫作