---
# System prepended metadata

title: 6. 增添色彩 - 玩耍色彩與留下痕跡_學生版
tags: [第六章, 程式設計, 互動藝術程式創作入門, 增添色彩 - 玩耍色彩與留下痕跡，學生版, Creative Coding]

---

---
tags: 程式設計,第六章,增添色彩 - 玩耍色彩與留下痕跡，學生版,互動藝術程式創作入門,Creative Coding
---

# 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：使用紅、綠、藍三色交疊後產生的顏色

![](https://i.imgur.com/qRywTYo.png)



---


* 使用方式
    * 透過 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度之間（黑色與白色無色相）。

![](https://i.imgur.com/jIulYZP.jpg)

S—表示飽和度/純度：顏色的純度，取值在0—100之間，飽和度高色彩較豔麗。飽和度低色彩就接近灰色。

![](https://i.imgur.com/YfCiGZn.jpg)

B—表示明度/亮度：颜色的明暗程度。取值也是在0—100之间。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到纯白，最低得到纯黑。
![](https://i.imgur.com/h6S5BSU.png)

---

* RGB模式的透明度會在 0~255
HSB(HSV)：由色相(Hue)、飽和度(Saturation)、亮度(Brightness/Value)三要素組成，相對於 RGB 會更容易直接控制想要的顏色與範圍。
![](https://i.imgur.com/PCk53e8.png)


---

* 顏色的組成：
    * Hue:色相，上圖中一圈 0~360 度可以想像對應到彩虹的紅~紫
    * Saturation:飽和度，上圖中越接近圓心飽和度越低，看起來比較灰，飽和度高則是更鮮豔
    * Brightness：亮度，上圖中越上面的顏色亮度越高
    * Alpha: 透明度


---

* p5 中的宣告方式：
    * 先用 colorMode(HSB) 指定為 HSB 模式
    * var clr , 飽和度(0-100), 亮度(0-100)
    * 如果使用這個方式宣告的顏色，可以用 clr._setAlpha(透明度(0-1))設定透明度。


---

HSB的顏色

![](https://i.imgur.com/2p8GAVy.gif)


---

```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background("#CE325C");
}

function draw() {
	colorMode(HSB)
	fill(mouseY%361,50,80)
	noStroke()
	ellipse(mouseX, mouseY, 80);
}
```



---


如果都要相同色相


![](https://i.imgur.com/hbNrIXu.gif)



---

```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background("#CE325C");
}

function draw() { 
	colorMode(HSB)
	fill(200+(mouseX/5)%30,50,80)
	noStroke()
	ellipse(mouseX, mouseY, 80);
	
}

```


---

利用滑鼠上下控制飽和度，左右控制亮度

降低飽和度、亮度可以讓作品更有層次感

![](https://i.imgur.com/jnm7nTt.gif)


---

```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background("#CE325C");
}

function draw() {
	colorMode(HSB)
	for(var i=0;i<width;i=i+50){
		var h=map(i,0,width,0,360)
		var s=map(mouseX,0,width,0,100)
		var b=map(mouseY,0,height,0,100)
	fill(h,s,mouseY/5)
	noStroke()
	ellipse(i,height/2, 80);
	}
}
```

---

讓球充滿整個視窗



![](https://i.imgur.com/5rtbSLL.gif)



---

```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}

function draw() {
	

}
```
---

每個都有不斷改變(連續改變，上例每一列都一樣的顏色)


![](https://i.imgur.com/O9me8nS.gif)



---

```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
}

function draw() {
	colorMode(HSB);
	for(var x=0;x<width;x=x+50){
		var h=map(x,0,width,0,360)
		fill(h,mouseY/5,mouseX/5)
	for(var y=0;y<height;y=y+50){
	ellipse(x,y,100);
	  }
	}
}
```

把圓弄小，讓他有彩虹燈輪流顯示畫面

![](https://i.imgur.com/Zmwr7Ax.gif)


---

```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}

function draw() {
	
    
    
    
}
```


---

可以把圓與圓的間距隨著mouseX與mouseY變化
也可以加上充滿顏色的透明度
或是把圓改為方框，都會有不同的感覺



---

![](https://i.imgur.com/TAuHxGC.gif)


---


```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
}

function draw() {
	colorMode(HSB);
	background(0)
	for(var x=0;x<width;x=x+mouseX/5+5){
		for(var y=0;y<height;y=y+mouseY/5+5){
		var h=map(x,0,width,0,360)
		var clr=color((h+y+frameCount*5)%360,mouseY/5,mouseX/5,1)
		fill(clr)
	ellipse(x,y,50);
	  }
	}
}
```
---

![](https://i.imgur.com/kzApG3x.gif)


---

```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
}

function draw() {
	colorMode(HSB);
	for(var x=0;x<width;x=x+mouseX/5+5){
		for(var y=0;y<height;y=y+mouseY/5+5){
		var h=map(x,0,width,0,360)
		var clr=color((h+y+frameCount*5)%360,mouseY/5,mouseX/5,1)
		fill(clr)
	ellipse(x,y,50);
	  }
	}
}
```


---


![](https://i.imgur.com/TaRljVW.gif)


---


```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
}

function draw() {
	colorMode(HSB);
	//background(0)
	for(var x=0;x<width;x=x+mouseX/5+5){
		for(var y=0;y<height;y=y+mouseY/5+5){
		var h=map(x,0,width,0,360)
		var clr=color((h+y+frameCount*5)%360,mouseY/5,mouseX/5,1)
		fill(clr)
	rect(x,y,30,50);
	  }
	}
}
```
### 漸層

[範例](https://openprocessing.org/sketch/874113)

利用指令lerpColor(第一個顏色,第二個顏色,漸層率0~1的顏色)




---

![](https://i.imgur.com/TrJLkCM.gif)



---



```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}

function draw() {
	var clr1 = color("#6fdbd7")
	var clr2 = color("Salmon") //鮭魚色
    fill(clr1)
	for(var i=0;i<width;i+=50){
	var r=map(i,0,width,0,1)
	var mid_Color=lerpColor(clr1,clr2,r)
	fill(mid_Color)
	rect(i,height/2,50)
	}
}
```



---

### 圖層重疊

#### blendMode

* blendMode(LIGHTEST);
    * 取最深色的哪個顏色
    * ![](https://i.imgur.com/dsrxbJI.png)

* blendMode(MULTIPLY);
    * 取兩個顏色的混合色
    * ![](https://i.imgur.com/tQiqe5F.png)

---



根據所設定的模式在顯示視窗內混合圖元。以下模式選擇可用來混合源圖元（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 - 是深色更深及增加對比度，忽略淺色。 


---


![](https://i.imgur.com/TAnht6P.gif)


---

```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}

function draw() {
	blendMode(BLEND)
	background(0)
	blendMode(SCREEN)
	var clr1=color("#6fdbd7")
	var clr2=color("salmon")
	fill(clr1)
	rect(0,height/2,50)
	fill(clr2)
	rect(width-50,height/2,50)
	for(var i=0;i<width;i+=100){
		clr1.setAlpha(30)
		fill(clr1)
		ellipse(0,height/2,i+mouseX)
	   }
	for(var r=0;r<width;r+=100){
		clr2.setAlpha(30)
		fill(clr2)
		ellipse(width-50,height/2,r+mouseY)
	   }
}
```

---

![](https://i.imgur.com/nYGbRFU.gif)


---

```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}

function draw() {
	blendMode(BLEND)
	background(0)
	blendMode(SCREEN)
	var clr1=color("#6fdbd7")
	var clr2=color("salmon")
	fill(clr1)
	rect(0,height/2,50)
	fill(clr2)
	rect(width-50,height/2,50)
	for(var i=0;i<width;i+=100){
		clr1.setAlpha(30)
		fill(clr1)
		ellipse(0,height/2,i+mouseX)
	   }
	for(var r=0;r<width;r+=100){
		clr2.setAlpha(30)
		fill(clr2)
		ellipse(width-50,height/2,r+mouseY)
	   }
}
```
---








### Blend mode:顏色之間互相影響的方式
* 使用方式：blendMode(模式名稱)
* 帶入不同的模式在物件交疊的時候會有不同的顏色效果，各種不同的效果可以參照下圖：
 ![](https://i.imgur.com/egYRGUd.jpg)
 
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、範圍內的隨機顏色變化，創造出會不斷變動的色彩效果。

![](https://i.imgur.com/NVMRiex.gif)


---


[LerpColor](https://www.openprocessing.org/sketch/890727) 使用 lerpColor() 創造顏色的漸層，搭配滑鼠位置與色彩重疊的效果。

![](https://i.imgur.com/bIHBf2C.gif)



---

[BLENDMode Screen](https://www.openprocessing.org/sketch/890730) 使用 blendMode 搭配隨機色票，讓筆刷的圓形交疊時呈現繽紛的色彩。

![](https://i.imgur.com/nKETIHZ.gif)



---

### 內容回顧

#### 注意內容

* 調用函式的順序: 在 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://i.imgur.com/Fpb5nW5.png)


https://www.pinterest.com/pin/502292164683954823/ 

https://trendland.com/andy-gilmore-kaleidoscopic-illustrations/


![](https://i.imgur.com/C5HPv59.jpg)



https://twitter.com/zachlieberman/status/1019221645737840640 

https://www.instagram.com/zach.lieberman/?hl=en


![](https://i.imgur.com/KpPvG1A.jpg)




https://www.instagram.com/mattmillsart/


![](https://i.imgur.com/pXN4Ysq.jpg)


![](https://i.imgur.com/N7xtppX.jpg)



https://derivative.ca/community-post/night-getty-what-i-see-what-you-get

![](https://i.imgur.com/vHjRq4x.jpg)

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：使用紅、綠、藍三色交疊後產生的顏色

![](https://i.imgur.com/hqz3KrV.png)

* 使用方式
    * 透過 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 會更容易直接控制想要的顏色與範圍。


![](https://i.imgur.com/srDO8pG.png)


* 顏色的組成：
    * 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://i.imgur.com/Fpb5nW5.png)

https://www.pinterest.com/pin/502292164683954823/
https://trendland.com/andy-gilmore-kaleidoscopic-illustrations/
![](https://i.imgur.com/C5HPv59.jpg)
https://twitter.com/zachlieberman/status/1019221645737840640
https://www.instagram.com/zach.lieberman/?hl=en

![](https://i.imgur.com/KpPvG1A.jpg)
https://www.instagram.com/mattmillsart/

![](https://i.imgur.com/N7xtppX.jpg)
![](https://i.imgur.com/pXN4Ysq.jpg)

https://derivative.ca/community-post/night-getty-what-i-see-what-you-get

- 創作心法
    - 光線
    - 多彩 / 無彩
    - 色散
    - 軌跡
    - 光暈
    - 融合
    - A+B=C
![](https://i.imgur.com/hqz3KrV.png)
![](https://i.imgur.com/PCk53e8.png)

- color function 解析顏色物件
    - 顏色物件
    - setRed / setGreen / setBlue / setAlpha
![](https://i.imgur.com/7Yl6Js7.png)

https://www.openprocessing.org/sketch/890703


---

- 色彩原理
    - colorMode https://p5js.org/reference/#/p5/colorMode
        - RGB
        - HSV
        - https://p5js.org/reference/#/p5/colorMode
![](https://i.imgur.com/aEkb7sK.png)

https://www.openprocessing.org/sketch/890712
- 透明度的應用
    - (r,g,b,alpha)
- 轉換對應顏色
    - lerpColor 混合轉換顏色
![](https://i.imgur.com/Abi9eFr.png)
https://www.openprocessing.org/sketch/890727
- 資源
    - Color Picker Chrome插件
    - https://coolors.co/
- 陣列與物件
    - 建立色彩陣列
    - 紀錄多重位置
- 圖層疊合
    - blendMode
        - BLEND
        - ADD
        - SCREEN 光線


---

https://butterfliesandbugs.wordpress.com/tag/blendmode/
![](https://i.imgur.com/9kwLJLe.png)
https://www.openprocessing.org/sketch/890730

- 範例延伸 - 花朵天堂
![](https://i.imgur.com/vHjRq4x.jpg)
https://www.openprocessing.org/sketch/890774

---
6. 增添色彩 - 玩耍色彩與留下痕跡_學生版.md
目前顯示的是「6. 增添色彩 - 玩耍色彩與留下痕跡_學生版.md」。