要進入進階色彩模式了，不知道大家有沒有想過，像photoshop或者light room那些修圖軟體中可以套用的一些率竟效果p5.js有沒有提供呢?畢竟如果沒有提供，而需求開出一個疊層負片效果的規格....，不敢想，不忍直視...。不過所幸p5提供了相關的參數給我們來製作這些效果，這個偉大的函數就叫做blendMode()

blendMode()

可以設定不同的參數效果在函數內，就可以讓相疊的兩張圖片有顏色效果

• ADD- A圖 和 B圖 的總和
• DARKEST- 只保留最深的顏色。
• LIGHTEST- 只保留最亮的顏色。
• DIFFERENCE- 底層圖像減去上層的顏色。
• EXCLUSION- 效果與DIFFERENCE類似，但柔和一點。
• MULTIPLY- 顏色相乘，所以成果更深。
• SCREEN- 反轉，相乘，在反轉一次，是MULTIPLY的相反效果。
• REPLACE- 只保留上層圖形。
• REMOVE- 只保留去除下層圖形的上層圖形。
• OVERLAY-結合multiply與screen，底層圖片深色更深，淺色更淺。(2D)
• HARD_LIGHT-結合multiply與screen效果，與overla類似，但底層與頂層圖片互換。(2D)
• SOFT_LIGHT-DARKEST和 LIGHTEST的混合。與HARD_LIGHT類似，但柔合一點。(2D)
• DODGE- 淡化淺色調並增加對比度，忽略深色。(2D)
• BURN- 應用較暗的區域，增加對比度，忽略淺色。(2D)
• SUBTRACT- A 和 B 的剩餘部分(3D)

canvas原生函數

但其實在原生的canvas也有提供類似的效果，而且可利用的函數更多，超級多，我稍微整理一下，做出簡單範例給大家看一下

• source-over
• source-in
• source-out
• source-atop
• destination-over
• destination-in
• destination-out
• destination-atop
• lighter
• copy
• xor
• multiply
• screen
• overlay
• darken
• lighten
• color-dodge
• color-burn
• hard-light
• soft-light
• difference
• exclusion
• hue
• saturation
• color
• luminosity

比對整理

我對比了一下使用起來的效果，整理成以下檔案

實作範例

blendMode()

那到底要怎麼應用呢?blendMode()很簡單，在繪製圖形前先告知程式就好了，設定blendMode以後的每個圖形都會被效果影響

blendMode(SOFT_LIGHT);
圖形1
圖形2

設定的位置不同也會影響畫布範圍

canvas原生函數

而原生語法的使用就要稍微注意了，如果我們希望可以用到她的裁切圖片模式的話，我們可能需要在兩張畫布中間塞入程式碼，裁切圖片的部份我們會在後續單元講到

小結

濾鏡雖然不常用到，但可以使用的內容真的很豐富，如果想要為自己的繪圖作品添加一點風味的話可以用用看喔~謝謝大家觀看