# P5.js 進階程式藝術繪圖工作坊 - 色鉛筆、畫布與粒子系統 共筆

下一堂課投票：https://app.sli.do/event/xdn2wrNvqb2YTrMopWZccm/embed/polls/a8e84710-b35d-4a7b-b2c9-3544be73c962

https://www.accupass.com/event/2212090655252031682503

Slido: https://app.sli.do/event/xdn2wrNvqb2YTrMopWZccm

講師：吳哲宇（https://portaly.cc/cheyuwu)
Portfolio: https://docs.google.com/presentation/u/2/d/1M_9nhD_f3Nrn6Kfknk3DFMTuryQX4chEVyFt-uGOu-0/edit

## 【Day1】

### 前置準備

確認大家環境設置（線上、線下）
* Hackmd
* [Slido](https://app.sli.do/event/xdn2wrNvqb2YTrMopWZccm): 設定名字＋測試
* Open Processing -> 作品都加上 ccworkshop2023 tag

同學帳號們
* 哲宇 https://openprocessing.org/user/139364
* 建安 https://openprocessing.org/user/326497
* chiao https://openprocessing.org/sketch/1794479
* Bugni https://openprocessing.org/user/290385?o=19&view=sketches
* Zilong https://openprocessing.org/user/337112
* JackWu https://openprocessing.org/user/362371
* Lynn https://openprocessing.org/user/218715/
* Hanya https://openprocessing.org/user/306488
* Sandy https://openprocessing.org/user/222154
* CT https://openprocessing.org/user/232182
* Yu Lee: https://openprocessing.org/user/227384
* Ollie https://openprocessing.org/user/361108
* 志源: https://openprocessing.org/user/277076
* Yi-Chien https://openprocessing.org/user/231929
* Nathan Cheng: https://openprocessing.org/user/362484
* 士鋒 https://openprocessing.org/user/360530
* 勤旻 https://openprocessing.org/user/226347
* Momo: https://openprocessing.org/user/359701
* 1t：https://openprocessing.org/user/362580
* Pam Pan：https://openprocessing.org/sketch/1794475
* Gani https://openprocessing.org/user/362366
* Sanford https://openprocessing.org/user/346306
* Louise https://openprocessing.org/user/360273
* Hsuan https://openprocessing.org/user/232101
* Rex https://openprocessing.org/user/174946
* Jeremy https://openprocessing.org/user/293932
* Amber https://openprocessing.org/user/362583
* Loxi https://openprocessing.org/user/231528
* Tom https://openprocessing.org/user/362573
* Powei https://openprocessing.org/user/357738
*

有趣的爆開的字：https://openprocessing.org/sketch/1447920

### 發想階段
#### 發想與設計
開始創作之前「確認主題」是很重要的事情，因此我們需要透過一些方法和途徑來發想跟刺激靈感
* 刺激靈感的話可以參考以下：
1. https://tender.art/
2. https://www.fxhash.xyz/u/Che-Yu%20Wu
3. https://www.artblocks.io/
4. https://www.artblocks.io/collections/curated/projects/0xa7d8d9ef8d8ce8992df33d8b8cf4aebabd5bd270/233
5. https://www.fxhash.xyz/generative/slug/o-fortuna
* 找 Moodboard 與參考
* 構圖
* 主題
* 色彩
* 構圖設計與草圖繪製

#### 同學們的靈感來源
(chiao)

(hanya)
https://tender.art/project/gravity's-end
https://www.artblocks.io/collections/curated/projects/0xa7d8d9ef8d8ce8992df33d8b8cf4aebabd5bd270/334

(CT)
https://tender.art/project/tempus-fugit-1
https://tender.art/project/solace
https://tender.art/project/eth/ringers-by-dmitri-cherniak

(Rex)
https://www.artblocks.io/collections/curated/projects/0xa7d8d9ef8d8ce8992df33d8b8cf4aebabd5bd270/255?section=all%20items
https://openprocessing.org/sketch/1795319

(Jack)
https://tender.art/project/beyond-the-asteroid-belt/5
https://tender.art/project/tempus-fugit-1/59

https://tender.art/project/fluidynamix-cities (Lynn)

(AMBER)

https://tender.art/project/dream-forest/6 (Momo)
https://tender.art/project/ai-psychedelic-forest/8 (Momo)
https://www.fxhash.xyz/generative/slug/light-shape-and-color (Momo)
https://www.artblocks.io/collections/curated/projects/0xa7d8d9ef8d8ce8992df33d8b8cf4aebabd5bd270/59 (Momo)
https://www.fxhash.xyz/gentk/796969 (Momo)
https://tender.art/project/sprocket-factory/12 (Momo)
https://www.fxhash.xyz/generative/slug/light-experiment (Momo)
https://www.fxhash.xyz/gentk/slug/the-passing-of-time-4 (Momo)
https://www.fxhash.xyz/generative/slug/trees.on.lake (Momo)
https://www.fxhash.xyz/generative/slug/organic-clusters (Momo)


https://www.artblocks.io/user/0xd4947236067760d20d2473c73d4b89ef28dfa9b2 (Sanford)

Bugni
https://www.fxhash.xyz/generative/18175
https://www.artblocks.io/collaborations/artblocksxpace/projects/0x64780ce53f6e966e18a22af13a2f97369580ec11/4

https://tender.art/project/mina/1 (Louis)

https://www.fxhash.xyz/generative/slug/the-binding-string (Nathan)

(Powei)
https://www.artblocks.io/collections/curated/projects/0xa7d8d9ef8d8ce8992df33d8b8cf4aebabd5bd270/62
https://tender.art/project/horizon(te)s

https://www.fxhash.xyz/generative/slug/geocollection (Jeremy)

https://www.fxhash.xyz/generative/slug/under-the-microscope (Angus)

https://www.fxhash.xyz/generative/slug/under-the-microscope (Angus)

https://www.fxhash.xyz/generative/slug/all-that-remains-1
https://www.fxhash.xyz/generative/slug/eucalyptus-and-sagebrush
(Sandy)

https://www.fxhash.xyz/generative/slug/water-17

https://www.fxhash.xyz/generative/slug/aquarelle

(Zilong)

https://verse.works/image/fullscreen/static%2F519992f3-a2b1-4e40-ad33-1537854048bd.png@webp

(士鋒)
https://www.fxhash.xyz/generative/slug/glooder
https://www.fxhash.xyz/generative/slug/the-magic-of-color-and-light
https://www.fxhash.xyz/generative/slug/rill

(YuLee)
https://www.fxhash.xyz/generative/slug/curtains-2
https://www.artblocks.io/collections/presents/projects/0xa7d8d9ef8d8ce8992df33d8b8cf4aebabd5bd270/275
https://www.artblocks.io/collections/presents/projects/0xa7d8d9ef8d8ce8992df33d8b8cf4aebabd5bd270/211
https://www.artblocks.io/collections/presents/projects/0xa7d8d9ef8d8ce8992df33d8b8cf4aebabd5bd270/241

https://www.pinterest.com/majerowob/color-pencil-idea/

#### 發想關鍵字 & Moodboard


Slido: https://app.sli.do/event/xdn2wrNvqb2YTrMopWZccm/live/polls
關鍵字：design poster

* #塗鴉 #暈染 #波紋 #細胞 #重疊 (哲宇)
https://www.pinterest.com/majerowob/2023-%E8%97%9D%E8%A1%93%E9%9D%88%E6%84%9F/

* #粒子 #螢光 #太空 #幾何 #3D #漂浮 (Powei)
https://www.pinterest.com/cpxz520/generative-art/

* #年輪 #森林 #沙漏 #光影 #鐘 #時間 #幾何 #有機 (Momo)
https://pin.it/7cdvSs6

* #月光海 ＃植物 ＃星空 ＃漁港 ＃極光 （chiao）
https://pin.it/6k1LKUv

* #天宮之城 #煙火 #重覆生長 #銀河 #魔法 #有機線條 #分段線斷(Lynn)
https://www.pinterest.com/doraemoncandyli/2023-idea-workshop/

* #漂浮城市 #迷宮 #星球 #光軌 #反射 #cyberpunk #glitch #方塊 #外星小生物 (CT) https://www.pinterest.com/bulewind719/p5-workshop/

* #高速公路 #火山 #粒子 #分割 #有機流動 (Rex) https://pin.it/25m3IRn

* #流星 #鍵盤 #手機 #電影 #靈魂 #wifi #網路 #電腦 (Tom)
https://pin.it/505Zpgj

* #雲 #城市 #光線 #人物 ＃像素圖 (Sanford)
https://www.pinterest.com/pin/681239881145106127/
https://www.pinterest.com/pin/3377768460019213/
https://www.pinterest.com/pin/199073246021943196/

* #自然 #生物 #光暈 #錯視 #災難 (Nathan)
https://www.pinterest.com/anbceeeeeqe/generative-ideas/

* #礦物 #流體 #植物 #有機 #空間 (Jeremy)
* https://www.pinterest.com/jeremychen2/2023-%E9%9D%88%E6%84%9F/
* 

* #細胞 #水族箱 #碰撞 # 試管 #city (1t)
* 這件美術作品是一個細胞水族箱，裡面有各種形狀和顏色不同的細胞在碰撞碰撞。在這個小小的世界裡，細胞們像城市裡的人一樣，有著各種不同的活動和目的。這個作品通過試管的形式呈現了一個微小世界的多樣性和複雜性。(from chatgpt)
* (備用： #mountain #水墨 #光影)
* [pinterest](https://www.pinterest.com/708kelly/p5js/)
* 
* #Water drop #Water_flow #Watercolor_Smudge (Zilong)
[moodboard](https://www.pinterest.com/b01501073/water/)

* #海洋 #太空 #材質感 #樹群 #流動 (Sandy)
https://www.pinterest.com/sansan0719/2023-ideas/

* #空間切割 #電影 #人物 #爆炸 #透明感 #粒子流動(hanya)
https://www.pinterest.com/amytrai/creative/

* 蕨類｜生長｜拓印｜粒子｜樹皮|抽象化｜無限生長｜扭曲｜藍曬 (Amber)
https://www.pinterest.com/gsn965321/open-processing-material/?invite_code=dbe2d8464a2246e0b5434576c7755fa1

)

* #城市 #鄉村 #生活圈 #建築 #結構 (Louis)
https://www.pinterest.com/ycc933040685/ideal/

* #水母 #水草 #太空漂浮 #煙霧繚繞 #光影 #多肉 #生長 #蝸牛 #紙雕 #波光粼粼 (Pam Pan)
https://pin.it/7dyLhRD

* ＃黑膠 ＃雨水 ＃漸層 ＃旋轉 ＃交錯 ＃飛碟
* https://www.pinterest.com/choycedesign/p5js-%E9%9D%88%E6%84%9F/

* #植物 #陽光 #重生 #溫暖 #成長 #大樹(JackWu)
[https://pin.it/5SZ1cEk](https://pin.it/rrylQu9)

* #彩煙 colorful smoke #酒精畫 #紙膠帶 #漣漪 #水彩 (Angus)
https://www.pinterest.com/angus912584/2023-p5-workshop-idea/


* #星系 #粒子月亮 #瞳孔 #變形蟲 #螢火蟲海 #山海月景 #羽毛花（Bugni）
https://www.pinterest.com/sunnieqq17/%E7%94%9F%E6%88%90%E5%BC%8F%E8%97%9D%E8%A1%93%E9%9D%88%E6%84%9F2023/

* #普普風 #馬賽克 #藍曬圖 #毛玻璃 #核融合 #花海 #塗鴉 (士鋒)
https://www.pinterest.com/jarvischao/p5js/

* #海洋 #線條 #花 #銀河 #幾何 #蝴蝶 (Yi-Chien)
https://www.pinterest.com/kevinyichienlee/2023/

* #線 #幾何 #粒子 #模糊 #液體流動 (yulee)
https://www.pinterest.com/a970192/ccworkshop/

* #動態文字 #水波 #點陣圖 #星空 #線條 #大樹 (Louise)
https://www.pinterest.com/tpfsakura/fonts/

* #雲 ＃天空 #星空 #風 #海洋 #光影
https://www.pinterest.com/huahsuank/pins/

* #花草 #光斑 #礦物切面 #漸層水泥 #Aesemic (Min)
* https://www.pinterest.com/b10610003/p5/

* #wave #liquid #particle #flow #water

同學分享用 chatGPT 做關鍵字：
#### 發想方法
有關鍵字之後，可以透過紙筆隨意畫六小格來簡單的塗鴉構思，這個階段不用深思

### 基礎繪製

- 粒子與物理性質控制
- 核心概念就是控制粒子的位置（p）、速度（v）以及加速度（a）來達到各種有趣效果
- https://openprocessing.org/sketch/1243356
- 產生器
- https://openprocessing.org/sketch/1217113

- 隨機性與規律性：自然亂數、布林噪聲與三角函數
可以透過一些隨機數，如 `random()`、`noise()`及帶有規律性的 `sin()`、`cos()`等來控制粒子的位置、速度、加速度來獲得一些有趣變化

- 軌跡、重複與韻律
- background
https://openprocessing.org/sketch/897428
- 演算法 - 遞迴 細化 數學
- https://openprocessing.org/sketch/915717
- function div()
- 粒子分裂
- 隨機偏移

// 生成粒子的模板定義 Code //

class Particle{
	constructor(args){
		let def = { 
			p: createVector(0,0),
			v: createVector(0,0), /* 粒子的預設屬性資料 */
			a: createVector(0,0),
			r: 30, 
		}
		Object.assign(def,args)
		Object.assign(this,def)
	}
	draw(){ 
        /* 粒子如何畫自己 */
		push()
			translate(this.p)
			circle(this.p.x,this.p.y,this.r)
		pop()
	}
	update(){ 
        /* 粒子如何更新自己的資料（如位置、速度等） */
		this.p.add(this.v)
		this.v.add(this.a)
		this.v.mult(0.9995)
	}
}

#### 語法小知識
`let` 變數
https://p5js.org/reference/#/p5/let

`createVector()`
https://p5js.org/reference/#/p5/createVector

`push()`
https://p5js.org/reference/#/p5/push

`pop()`
https://p5js.org/reference/#/p5/pop

`frameRate(fps)`
https://p5js.org/reference/#/p5/frameRate

`for` (計數變數的起始狀態; 結束條件; 每次結束後變數如何變化) {
概念相同，需要重複執行的事情
}

`filter(filterType, [filterParam])`
https://p5js.org/reference/#/p5/filter

`image(img, x, y, [width], [height])`
https://p5js.org/reference/#/p5/image

`setAlpha(alpha)`
https://p5js.org/reference/#/p5.Color/setAlpha

`noise(x, [y], [z])`
https://p5js.org/reference/#/p5/noise

`pixelDensity(val)`
https://p5js.org/reference/#/p5/pixelDensity

`randomSeed(seed)`
https://p5js.org/reference/#/p5/randomSeed

`noiseSeed(seed)`
https://p5js.org/reference/#/p5/noiseSeed

`map()`
https://p5js.org/reference/#/p5/map

`split()`
https://p5js.org/reference/#/p5/split

`draw()`
https://p5js.org/reference/#/p5/draw

`update()`
https://p5js.org/reference/#/p5.PeakDetect/update

let particles = []

for(let i=0;i<10;i++){
    /* 根據 Particle 模板生成一個新粒子 */
    let newP = new Particle() 
    
    /* 將這個新粒子放進陣列清單 particles 以供我們取用 */
    particles.push(newP) 
}

### 0114 Demos

Demo 1 粒子線條
https://openprocessing.org/sketch/1794552

Demo 2 樹枝
https://openprocessing.org/sketch/1794636

Demo 3 漸層延伸
https://openprocessing.org/sketch/1794673

Demo 4 點雲筆刷
https://openprocessing.org/sketch/1794725

Demo 5 材質
https://openprocessing.org/sketch/1795213

Demo 6 Blur https://openprocessing.org/sketch/1795286
- 有關 CSS 的 Filter 可以參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

Demo 7 粒子力場 https://openprocessing.org/sketch/1795317

https://in.pinterest.com/pin/474074298273689066/

https://openprocessing.org/sketch/779854

### 材質
<!-- https://openprocessing.org/sketch/1615614 -->

- 點雲與機率
- 

- random(random(random()))
- 材質處理
- `loadImage()` 載入圖片→用 `image()` 疊上去→用 `blendMode(MULTIPLY)`(記得用 push/pop包裹) 調整疊層關係
- overallTexture 產生材質

    overAllTexture = createGraphics(width,height)
	overAllTexture.loadPixels()
	
    for(var i=0;i<width+5;i++){
	    for(var o=0;o<height+5;o++){
            
        /* 設置 overAllTexture 的格子點像素資料 through 隨機的灰階 */
        overAllTexture.set(i,o,color(120,noise(i/10,o/10)*random([0,0,0,0,10,20])))
		
	}
	
    overAllTexture.updatePixels()

- 輕畫布材質
- shader材質
- 各種筆刷製作
- 筆刷 Class
- 旋轉角度

#### canvas 材質
- 材質圖片：
https://openprocessing-usercontent.s3.amazonaws.com/files/user139364/visual1616300/h2c259fdd4b3433192527941e79e7dcc8/canvas-light.jpeg

Template: Point與筆刷製作
* 水彩材質 https://openprocessing.org/sketch/1617186
* 粉彩材質 https://openprocessing.org/sketch/879891
* https://openprocessing.org/sketch/1753524
* 炭筆 https://openprocessing.org/sketch/1779447
* 色鉛筆 https://openprocessing.org/sketch/1749574

### 色彩

- 色彩模式與處理
- rgb / cmyk
- 對顏色做調整 set rgb / alpha
- 顏色的透明度
- 參考色票與漸進色
- cooler
- 照片取色
- 對比取色
- 相近色
- 疊色
- blendMode
- Color Grading 顏色對應轉換
- lerpColor 的 線性轉換

配色好幫手 → https://coolors.co/

// 將 hex 字串快速做成陣列的作法

let colors = "562c2c-f2542d-f5dfbb-0e9594-127475"

colors.split("-") /* 將原始的字串素材以 - 為界切成陣列 */
      .map( str => "#" + str ) /* 對映成有 # 的陣列 */

### 印刷
講師：曾煜仁
- https://drive.google.com/file/d/1hBmrGYKVaQyUTfkGsUQEz2-JTIHCw1Hb/view?usp=sharing

### 視覺效果
- 濾鏡與扭曲
https://openprocessing.org/sketch/1713192
- 模糊與光暈
- canvas filter

    	drawingContext.filter =`blur(10px)`;

- 粒子雜訊化

Template: Shader + p5 畫布
- 陰影

	drawingContext.shadowColor = color(0,50)
	drawingContext.shadowOffsetX = 3
	drawingContext.shadowOffsetY = 3
	drawingContext.shadowBlur = 10

---

## 【Day2】

**第二天大綱**

* local
* canvas 材質
* 作品分析
* 材質感
* 畫布位移跟額外的畫布
* 模糊與光暈
* 過shader濾鏡原理

#### Local端開發
- 下載安裝 [VSCode](https://code.visualstudio.com/Download)
- 在 VSCode 加入 `live server` 擴充功能
- 

---

## 輸出
- Canvas size (比例)
- A4: 703*983 pixel
- Photo: 583*420 pixel
- Pixel Density
- 輸出至少設定成 `pixelDensity(5)`
- 設備性能夠的話可以設 `pixelDensity(8)`
- 選作品
- save()
- 如果背景沒有透明度，建議儲存成 JPG （檔案會比 PNG 小）
- `save(name.jpg)`

**輸出實品尺寸（出血 3mm）**
- A4 輸出：186mm * 260mm
- Photo 輸出：154mm * 111mm

**示意圖**
- a4 兩張: 
- photo 四張: 

---

### 互動與資料來源

- 引用資料來源進行創作
- 引入JSON檔案
- 滑鼠 鍵盤 聲音 互動效果
- mouseX/mouseY

## 同學作品集合區

---
哲宇 https://openprocessing.org/sketch/1795317

作品名稱：

描述：


---
Nathan Cheng
作品名稱
描述：血滴加上龍捲風
https://openprocessing.org/sketch/1795431

---
Powei
作品名稱:
描述:線條飄來飄去
https://openprocessing.org/sketch/1795454

---

CT-22
https://openprocessing.org/sketch/1795427

作品名稱:塗鴉隧道
描述:
原本想做海洋的漂浮感，試了幾次效果沒有很好，後來嘗試的時候意外發現重複畫布慢慢縮小有種透視感的感覺，像是往前的隧道。


---

士鋒
https://openprocessing.org/sketch/1795382

作品名稱：夏日祭典
描述：
逐漸生長及綻放，像祭典般歡慶舞動著、釋放的煙花點亮著草坪，整體交接成日式和服碎花布

---

1t
[星軌](https://openprocessing.org/sketch/1795235)
沙子/軌道

---

Pam Pan
作品名稱：嘿嘿 聽說是仙人掌
創作方式：嘗試使用粒子系統製作仙人掌
https://openprocessing.org/sketch/1795401

---

Lynn
https://openprocessing.org/sketch/1795237

意外變成的圓，原本想做像梵谷星空那種線條感，但沒辦法好好控制想轉換的方向，就選轉了整張畫布，變成這個形狀XD 加上上課說的材質和顏色，希望有手繪粉臘筆的感覺


---

27-Jack
https://openprocessing.org/sketch/1794647

---
15-chiao
https://openprocessing.org/sketch/1794479
心流｜其實本來想做月光海、極光等等之類很浪漫抽象的圖樣，但程度不夠，只能先把課堂實作的某個段落(粒子材質)嘗試操作其他顏色和位移的數值，意外得到的作品。


---
Amber

https://openprocessing.org/sketch/1795410

https://openprocessing.org/sketch/1795376

1.森林與沙丘
2.蕨，以藍曬圖的風格模仿家裡盆栽蕨類垂墜的感覺

---

Louise
作品名稱：夜楓
https://openprocessing.org/sketch/1795368

---
Angus

作品名稱：Music Visualization \
描述：嘗試載入音樂檔案，取得頻譜圖、音樂總秒數、Centroid 頻率，影響粒子軌跡、顏色。原本預期想做到彩色雲的效果但卡住了，所以只做基本的粒子換色亂跑。有個已知問題是粒子顏色隨著時間會趨於一致。

https://www.pinterest.com/pin/751538256586808693/
https://openprocessing.org/sketch/1794868

---
Sandy
https://openprocessing.org/sketch/1795400

作品名稱：flow\
描述：原本想嘗試做出類似色鉛筆筆刷感，來不及完成則依目前嘗試進度，讓程式產生出類似地形的流動感

---
Yi-Chien
https://openprocessing.org/sketch/1795387

---
Jeremy

作品名稱: YUAN \
平塗的圓渲染的圓~

https://openprocessing.org/sketch/1795425

---
Rex
https://openprocessing.org/sketch/1795402

---
Min 勤旻
https://openprocessing.org/sketch/1795453

古老壁畫：
嘗試在不同塗層結合噴漆、粉彩筆刷和暈染材質，同時加入細小刮痕與隨機塗樣，堆疊出壁畫質感。



---
Yu Lee
https://openprocessing.org/sketch/1795422

---
hsuan
https://openprocessing.org/sketch/1795392

---
loxi
https://openprocessing.org/sketch/1794487

---
Sanford

https://openprocessing.org/sketch/1795325
https://openprocessing.org/sketch/1795437

---

## 延伸閱讀
The Nature of code
https://natureofcode.com/book/

## 筆記

### 可參考靈感的NFT網站資源

* https://www.fxhash.xyz/: 上架成本較低，比較多實驗性的作品
* https://www.fxhash.xyz/u/Che-Yu%20Wu
* https://www.artblocks.io/
* https://tender.art/: 有比較多精緻的作品

### 靈感流程

1. 先想關鍵字
Ex.可以從 design poster 找
2. 在Pintrest找靈感圖版
3. 繪製草圖

### 粒子效果的觀念
1. 放在什麼位置（ｐ）
2. 速度 (v / a)
3. 有什麼變化

### Class的用法
draw -> 跟位置無關的程式
update -> 位置

* 粒子移動

粒子跟粒子移動之間的速度（ｖ）
使其剛好貼近，就會成為連續性的線條

漩渦狀：邊前進邊旋轉

透過點擊滑鼠設定每次初始位置
if (mouseIsPressed){

光暈 blendMode
https://p5js.org/reference/#/p5/blendMode

---

## 如何匯出作品
- Pixel Density
- 寬高比調整
- 選作

## 印刷

### 傳統印刷 vs 數位印刷 的印刷流程

創作作品 -> 印前置程 -> 印刷 -> 印後工加工 -> 輸出

### 印刷顏色

1. CMYK -> 傳統印刷
2. RGB -> 廣域印刷，通常會跟實際印出來點差異
* . 螢幕色 & 實際印刷色 會有差
4. 特殊色：某個顏色要特別處理 ex.金色、銀色..
5. 色票： Pantone (主流) / PCCS ，實體卡片和印刷廠溝通用

### 印刷種類
* 平版印刷：最主流的印刷，適合大量印製
* 數位印刷：與商用雷射印刷類似，可以印比較小量


* 網版印刷：Riso(近年文青市集很常用)，適合印小量精緻印刷品，缺點：一色一版，很容易會有偏移的問題
* 推薦印刷店：北車retro印刷Jam
* 凸版印刷：
* 能做出各種特殊精緻的效果
* ex. 燙金邊
* https://jese-infini.com/2015/03/12/%E5%8D%B0%E5%88%B7%E5%8A%A0%E5%B7%A5-%E7%83%A4%E6%9D%BE%E9%A6%99/
* 熱轉印/熱昇華
* 可以印在大部分的物品 ex.印在馬克杯、衣服..etc
* 藝術微噴
* 這次工作坊會用
* 數位印刷一種
* 要特殊紙張才能用(紙頗貴QQ)
* 適合印相片、數位作品
* 印製時間長、成本高、不適合用來印大量

### 紙張
* 紙選對了就成功了一半，不要小看他ＸＤ

#### 塗布紙 Coated Paper
* 印起來比較漂亮
* 顏色比較飽和
#### 非塗布紙 Uncoated Paper
* 比較有紋路的紙，屬於非塗佈紙

https://www.mindscmyk.com/2020/10/07/pre-printing-knowledge-20-coated-uncoated-paper/

#### 磅數
* 通常印90磅以下，方便閱讀
* 卡紙用200磅以上
#### 無酸紙
* ex. 報紙
* 可以保存很久
* 價格比較貴

### 印刷前要注意
以圖層分，並標示其功能
1. 色彩模式 (確認CMYK/RGB再進行使用)
2. 出血： (留3~5mm防止裁切)
3. 解析度&尺寸
4. 文字建立外框 (但我們這次應該比較不會碰到，情況：文字會跑掉or掉字，需轉為外框)
5. 解析度dpi起碼要300dpi以上

### 色彩
RGB( R紅、G綠、B藍)：數值的範圍從0（純黑色）-255（純白色）

HSB( H色相、S飽和度、B明度)：數值的範圍從0-360

### 循軌跡移動的 Perlin Noise
1. 空間中放粒子
2. 在空間中給連續的力量
3.

### 印刷前置設定
1. 長寬
2. pixelDensity(val)
3. 300dpi
4. 確保作品樣式一樣randomSeed(seed) noiseSeed(seed)
5. 滑鼠右鍵檢查長寬
6. `keyPressed()`編寫以s存下當下滿意畫面

    function keyPressed(){
        if(key == "s"){
            save()
        }
    }

預設存檔為.png，建議改為.jpg

The Book of Shaders
https://thebookofshaders.com

shader template
https://openprocessing.org/sketch/1572139

cnoise

TOUCHDESIGNER
https://derivative.ca/

生成式聲音可以用的軟體 max/msp
https://zonesoundcreative.com/maxstep01/
p5.sound也可以參考
https://openprocessing.org/sketch/611472

zonesound
https://zonesoundcreative.com/
https://zonesoundcreative.com/maxstep01/

整合進前端專案
https://www.npmjs.com/package/p5
* 最簡單的方法 -> iframe直接嵌入
* 要真的把code全部整進去前端的話 －>instance mode
* https://p5js.org/reference/#/p5/p5
硬體規格
* GPU 30以上的都OK

常見的生成藝術創作技巧：遞迴
https://openprocessing.org/sketch/868722

偵測骨架工具
https://learn.ml5js.org/#/reference/posenet

多投影機串接畫面
touchedesigner也可以分割投到不同投影機畫面
國外光雕投影常用 -> https://madmapper.com/

p5.js 怎麼demo?
* openprocessing
* 錄影
* 螢幕錄影
* https://github.com/calebfoss/p5.videorecorder

### Q&A

台灣工作機會?
- 台灣互動設計公司滿多的：版塊、參式、黑洞..
- 常應用在商案活動網頁互動特效、VJ 等
- p5.js 適合小專案，大型畫布的效能不佳
- https://creativecoding.in/resources/