---
# 6. 增添色彩 - 玩耍色彩與留下痕跡_學生版
---
## 單元介紹
### 目標
* 學習在 p5 指定顏色與基礎的顏色操作
* 認識 RGB 與 HSB 兩種色彩系統
* 如何配色與混色
* 疊合模式(Blendmode)的應用
* 利用色彩的週期變化與隨機範圍
* 作品中的色彩管理
---
* p5 中的 color 物件：可以放在 fill()、background()、stroke() 等方法裡面，控制繪圖顏色的物件。
* 宣告方式：var clr = color(參數) 要注意變數命名不能用color，會跟 p5 的函式名稱衝突。
---
* 透過不同方式指定顏色：color(參數) 的刮號內可以接收多種不同類型的參數來指定顏色：
* 只給ㄧ個數值：color(100) -> 相同於 color(100,100,100) 的灰階
* 直接給予 RGB 的數值：color(255,0,0) -> 紅色，也可以加上第四個參數透明度(0~255) color(255,0,0, 99) -> 透明度 100/256 的紅色
* 填入顏色的名稱：color('red') 填入的是用引號包起來的字串，顏色的名稱們可以參考這邊 [HTML Color Names](https://www.w3schools.com/tags/ref_colornames.asp)
* 填入色票號碼：color('#00ff00') -> 一樣式字串，但是裡面是 # 開頭的色票號碼
* 先宣告色彩模式再填入色碼：color('rgb(0,0,255)')／color('hsl(150,100%,50%)')
* 實際的操作與更多範例可以參考官方文件
---
* 使用方式：宣告過後把這個顏色物件的變數塞到相對應的函數裡面，例如上述先告了 var clr = color('red')，就可以直接使用 fill(clr) 的方式設定填色、background(clr)設定背景顏色。
* 取得顏色/透明度：_getBlue()/_getGreen()/_getRed()/_getAlpha()，不論模式回傳 rgb(0-255)，alpha(0-100)
* 設定顏色/透明度：setBlue()/setGreen()/setRed()/setAlpha()
---
### RGB：使用紅、綠、藍三色交疊後產生的顏色
---
* 使用方式
* 透過 colorMode(RGB)
* var clr
* 從上圖可知，color(255,0,0) 是純紅色，color(255,255,0)是黃色，color(255,255,255)是白色、color(0,0,0)是黑色，rgb 都相同的話就是灰階，以此類推
---
[學會HSB色彩模式，讓配色有理有據！](https://www.gushiciku.cn/pl/gHkc/zh-tw)
HSB 模式對應的媒介是人眼，在選擇色彩這件事上，HSB 使用了更貼近人類感官直覺的方式來描述色彩，它把顏色分為色相、飽和度、明度三個因素（將我們人腦的“深淺”概念擴充套件為飽和度和明度）。
H—色相/色調：顏色的相貌，顏色的調性，在標準色輪上，色相是按位置度量的，取值在0—360度之間（黑色與白色無色相）。
S—表示飽和度/純度：顏色的純度，取值在0—100之間，飽和度高色彩較豔麗。飽和度低色彩就接近灰色。
B—表示明度/亮度：颜色的明暗程度。取值也是在0—100之间。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到纯白，最低得到纯黑。
---
* RGB模式的透明度會在 0~255
HSB(HSV)：由色相(Hue)、飽和度(Saturation)、亮度(Brightness/Value)三要素組成，相對於 RGB 會更容易直接控制想要的顏色與範圍。
---
* 顏色的組成：
* Hue:色相，上圖中一圈 0~360 度可以想像對應到彩虹的紅~紫
* Saturation:飽和度，上圖中越接近圓心飽和度越低，看起來比較灰，飽和度高則是更鮮豔
* Brightness：亮度，上圖中越上面的顏色亮度越高
* Alpha: 透明度
---
* p5 中的宣告方式：
* 先用 colorMode(HSB) 指定為 HSB 模式
* var clr , 飽和度(0-100), 亮度(0-100)
* 如果使用這個方式宣告的顏色，可以用 clr._setAlpha(透明度(0-1))設定透明度。
---
HSB的顏色
---
```javascript=
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
}
function draw() {
colorMode(???????) //色相:0-360，飽和度0-100，亮度 0-100
fill(?????????????????)
ellipse(mouseX, mouseY, 100, 100);
}
```
---
如果都要相同色相
---
```javascript=
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
}
function draw() {
}
```
---
利用滑鼠上下控制飽和度，左右控制亮度
降低飽和度、亮度可以讓作品更有層次感
---
```javascript=
[function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
}
function draw() {
}]
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
}
function draw() {
colorMode(HSB);
for(var i=0;i<width;i=i+50){
var h = map(i,0,width,0,360)
fill(h,mouseY/5,mouseX/5)
ellipse(i,height/2,100);
}
}
```
---
讓球充滿整個視窗
---
```javascript=
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
}
function draw() {
}
```
---
每個都有不斷改變(連續改變，上例每一列都一樣的顏色)
---
```javascript=
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
}
function draw() {
}
```
把圓弄小，讓他有彩虹燈輪流顯示畫面
---
```javascript=
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
}
function draw() {
}
```
---
可以把圓與圓的間距隨著mouseX與mouseY變化
也可以加上充滿顏色的透明度
或是把圓改為方框，都會有不同的感覺
---
---
```javascript=
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
}
function draw() {
}
```
---
---
```javascript=
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
}
function draw() {
}
```
---
---
```javascript=
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
}
function draw() {
}
```
### 漸層
[範例](https://openprocessing.org/sketch/874113)
利用指令lerpColor(第一個顏色,第二個顏色,漸層率0~1的顏色)
---
---
```javascript=
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
}
function draw() {
var clr1 = color("#6fdbd7")
var clr2 = color("Salmon") //鮭魚色
}
```
---
### 圖層重疊
#### blendMode
* blendMode(LIGHTEST);
* 取最深色的哪個顏色
* 
* blendMode(MULTIPLY);
* 取兩個顏色的混合色
* 
---
根據所設定的模式在顯示視窗內混合圖元。以下模式選擇可用來混合源圖元（A）與已經在顯示視窗的圖元（B）：
* BLEND - 顏色線性插值：C = A*係數 + B。這是預設混合模式。
* ADD - A 與 B 的總和
* DARKEST - 將顯示當中最深的顏色：C = min(A*係數, B)。
* LIGHTEST - 將顯示當中最淺的顏色：C = max(A*係數, B)。
* DIFFERENCE - 從底下的圖像中減去顏色。
* EXCLUSION - 與 DIFFERENCE 相似但不那麼強烈。
* MULTIPLY - 將顏色相乘，效果一定會更暗。
* SCREEN - 與 MULTIPLY 相反，使用顏色的反值。
* REPLACE - 圖元將完全蓋過其他圖元並將不會使用透明度值。
* OVERLAY - MULTIPLY 及 SCREEN 和混合。暗值將相乘，亮值將相乘反值。
* HARD_LIGHT - 當高於 50% 灰時 SCREEN，低於時 MULTIPLY。
* SOFT_LIGHT - DARKEST 及 LIGHTEST 的混合。與 OVERLAY 的效果相似，但不那麼強烈。
* DODGE - 使淺色更淺及增加對比度，忽略暗色。
* BURN - 是深色更深及增加對比度，忽略淺色。
---
---
```javascript=
var colors = "eac435-345995-e40066-03cea4-fb4d3d".split("-").map(a=>"#"+a)
function setup() {
createCanvas(windowWidth, windowHeight);
background(0);
}
function draw() {
}
```
---
---
```javascript=
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
}
function draw() {
}
```
---
### Blend mode:顏色之間互相影響的方式
* 使用方式：blendMode(模式名稱)
* 帶入不同的模式在物件交疊的時候會有不同的顏色效果，各種不同的效果可以參照下圖：
ref: https://butterfliesandbugs.wordpress.com/tag/blendmode/
### 管理色彩：使用陣列
* 陣列操作基礎：
* 物件可以理解為ㄧ個可以連續放很多資料的一維儲存空間
* 裡面放的東西可以是任何型態，像是先前提過的數字、字串、boolean 值等等，用,隔開
* 宣告ㄧ個陣列的變數： var arr = [資料1,資料2,資料3,資料4, ...] 後面視需求還可以放很多很多…
* 陣列值的取用：從 0 開始，arr[0] 是取第ㄧ個物件（資料1）、arr[1] 是取第二個物件（資料2），以此類推
* 陣列的長度：arr.length
* 結合色票操作：
* 先宣告ㄧ個陣列的色票：var colors = ["#E4572E","#17BEBB","#FFC914","#2E282A","#76B041"]
* 隨機取用裡面的色票：
```javascript=
var clr
fill(clr)
```
或是
```javascript=
for(var i=0; i<15; i++){
var clr = colors[i%colors.length] // 這樣在迴圈內就可以依序取得色票的顏色
fill(clr)
...
}
```
* 要指定某個特定的色票：
```javascript=
var clr = colors[0] //取用第ㄧ個色票
fill(clr)
```
---
### 範例練習
---
[Color Madness HSB](https://www.openprocessing.org/sketch/890712) 結合多個色塊的排列，並且用上每個色塊的 x,y位置、frameCount、範圍內的隨機顏色變化，創造出會不斷變動的色彩效果。
---
[LerpColor](https://www.openprocessing.org/sketch/890727) 使用 lerpColor() 創造顏色的漸層，搭配滑鼠位置與色彩重疊的效果。
---
[BLENDMode Screen](https://www.openprocessing.org/sketch/890730) 使用 blendMode 搭配隨機色票，讓筆刷的圓形交疊時呈現繽紛的色彩。
---
### 內容回顧
#### 注意內容
* 調用函式的順序: 在 openProcessing 裡面如果要使用 p5 內建的方法或是屬性（例如 color(), fill()…），需要在 setup() 或是 draw() 裡面才可以用喔，如果放在程式的最上面會因為還沒有讀取 p5 的套件內容而執行錯誤 🤯
```
//錯誤的寫法
var clr = color('#525566'); // <- 電腦會因為不知道 color() 是什麼所以出錯
setup(){...}
draw(){...}
// 正確的寫法
var clr;
setup(){
clr = color('#525566');
...
}
draw(){
fill(clr);
...
}
```
## 創作技巧：
* 結合繪製元素的位置與 frameCount 可以創造出持續變動的顏色變化效果。如：color('hsb((pos.x+pos.y+frameCount*5)%360, 100%, 100%)')
* 色相可以加入一定範圍內的 random 讓顏色保持一定的一致性，假如想要都是綠色系的顏色，可以用 colorMode(HSB);clr = color(random(-50,50)+125,100,100); 讓顏色不要偏離太多。
* 不一定要都用很高亮度的顏色，偶爾降低彩度會讓色彩更柔和。
* 創作心法：光線、多彩 / 無彩、色散、軌跡、光暈、融合
### p5 語法
colorMode(Mode)：設定 p5 的色彩模式 LerpColor(c1, c2, amt)：回傳兩個顏色物件的過度中，特定比例的顏色。例如 amt 為 0 的情況下，回傳的顏色是 c1， amt 為 1 的情況下，回傳 c2。 blendMode(Mode)：設定色彩混和模式。
---
### 課後問題
#### 延伸閱讀/資源
---
* 什麼是 console？ console 可以理解我們跟程式碼溝通的介面，像是先前用的 print() 也算是 console 的一種，讓我們可以看到某些變數現在的狀態。而每個瀏覽器也有自己內建的 console，以 chrome 為例，在瀏覽器中按右鍵，選擇檢查（Inspect），再點選 Console 就可以進到瀏覽器的後台，我們也可以在這邊執行程式碼直接讓瀏覽器去執行。關於更多相關的資訊，可以參考 Google 的官方文件。
* Color Picker Chrome插件
* https://coolors.co/ 色票生成工具
---
#### 參考範例
https://www.pinterest.com/pin/502292164683954823/
https://trendland.com/andy-gilmore-kaleidoscopic-illustrations/
https://twitter.com/zachlieberman/status/1019221645737840640
https://www.instagram.com/zach.lieberman/?hl=en
https://www.instagram.com/mattmillsart/
https://derivative.ca/community-post/night-getty-what-i-see-what-you-get
https://www.openprocessing.org/sketch/890774
課程素材僅供教學，不提供其他商業用途
---
# 單元介紹
## 目標
## 學習在 p5 指定顏色與基礎的顏色操作
* 認識 RGB 與 HSB 兩種色彩系統
* 如何配色與混色
* 疊合模式(Blendmode)的應用
* 利用色彩的週期變化與隨機範圍
* 作品中的色彩管理
## 課程重點
p5 中的 color 物件：可以放在 fill()、background()、stroke() 等方法裡面，控制繪圖顏色的物件。
* 宣告方式：var clr = color(參數) 要注意變數命名不能用color，會跟 p5 的函式名稱衝突。
* 透過不同方式指定顏色：color(參數) 的刮號內可以接收多種不同類型的參數來指定顏色：
* 只給ㄧ個數值：color(100) -> 相同於 color(100,100,100) 的灰階
* 直接給予 RGB 的數值：color(255,0,0) -> 紅色，也可以加上第四個參數透明度(0~255) color(255,0,0, 99) -> 透明度 100/256 的紅色
* 填入顏色的名稱：color('salmon') 填入的是用引號包起來的字串，顏色的名稱們可以參考這邊 [HTML Color Names](https://www.w3schools.com/tags/ref_colornames.asp)
* 填入色票號碼：color('#00ff00') -> 一樣式字串，但是裡面是 # 開頭的色票號碼
* 先宣告色彩模式再填入色碼：color('rgb(0,0,255)')／color('hsl(150,100%,50%)')
* 實際的操作與更多範例可以參考官方文件
* 使用方式：宣告過後把這個顏色物件的變數塞到相對應的函數裡面，例如上述先告了 var clr = color('red')，就可以直接使用 fill(clr) 的方式設定填色、background(clr)設定背景顏色。
* 取得顏色/透明度：_getBlue()/_getGreen()/_getRed()/_getAlpha()，不論模式回傳 rgb(0-255)，alpha(0-100)
* 設定顏色/透明度：setBlue()/setGreen()/setRed()/setAlpha()
## RGB：使用紅、綠、藍三色交疊後產生的顏色
* 使用方式
* 透過 colorMode(RGB)
* var clr
* 從上圖可知，color(255,0,0) 是純紅色，color(255,255,0)是黃色，color(255,255,255)是白色、color(0,0,0)是黑色，rgb 都相同的話就是灰階，以此類推
* RGB模式的透明度會在 0~255
HSB(HSV)：由色相(Hue)、飽和度(Saturation)、亮度(Brightness/Value)三要素組成，相對於 RGB 會更容易直接控制想要的顏色與範圍。
* 顏色的組成：
* Hue:色相，上圖中一圈 0~360 度可以想像對應到彩虹的紅~紫
* Saturation:飽和度，上圖中越接近圓心飽和度越低，看起來比較灰，飽和度高則是更鮮豔
* Brightness：亮度，上圖中越上面的顏色亮度越高
* Alpha: 透明度
* p5 中的宣告方式：
* 先用 colorMode(HSB) 指定為 HSB 模式
* var clr ), 飽和度(0-100), 亮度(0-100))
* 如果使用這個方式宣告的顏色，可以用 clr._setAlpha(透明度(0-1))設定透明度。
- 核心概念
- 如何指定不同顏色 (黑白/rgb/hex)
- 認識RGB與HSB兩種色彩系統
- 更改色彩的透明度
- 如何配色與混色
- 疊合模式的應用
- 利用色彩的週期變化與隨機範圍
- 作品中的色彩管理
- 觀摩案例
https://www.pinterest.com/pin/502292164683954823/
https://trendland.com/andy-gilmore-kaleidoscopic-illustrations/
https://twitter.com/zachlieberman/status/1019221645737840640
https://www.instagram.com/zach.lieberman/?hl=en
https://www.instagram.com/mattmillsart/
https://derivative.ca/community-post/night-getty-what-i-see-what-you-get
- 創作心法
- 光線
- 多彩 / 無彩
- 色散
- 軌跡
- 光暈
- 融合
- A+B=C
- color function 解析顏色物件
- 顏色物件
- setRed / setGreen / setBlue / setAlpha
https://www.openprocessing.org/sketch/890703
---
- 色彩原理
- colorMode https://p5js.org/reference/#/p5/colorMode
- RGB
- HSV
- https://p5js.org/reference/#/p5/colorMode
https://www.openprocessing.org/sketch/890712
- 透明度的應用
- (r,g,b,alpha)
- 轉換對應顏色
- lerpColor 混合轉換顏色
https://www.openprocessing.org/sketch/890727
- 資源
- Color Picker Chrome插件
- https://coolors.co/
- 陣列與物件
- 建立色彩陣列
- 紀錄多重位置
- 圖層疊合
- blendMode
- BLEND
- ADD
- SCREEN 光線
---
https://butterfliesandbugs.wordpress.com/tag/blendmode/
https://www.openprocessing.org/sketch/890730
- 範例延伸 - 花朵天堂
https://www.openprocessing.org/sketch/890774
---
6. 增添色彩 - 玩耍色彩與留下痕跡_學生版.md
目前顯示的是「6. 增添色彩 - 玩耍色彩與留下痕跡_學生版.md」。
Sign in with Wallet
Connect another wallet