今天進入顏色模式的分享，會介紹到怎麼指定顏色模式，以及基礎的上色與相關操作

顏色模式

顏色模式主要分兩種，分別為以下，默認模式為 RGB

• RGB
• HSB

RGB模式

首先我們先來看看RGB模式以及上色的應用

在指定上色的時候可以用 color() 這個函數

color()

• 當函數只放入一個數值的時候，如 color(255) ， 他將返回灰階的色彩

• 放入兩個數值，如 color(255,255)，他將被視為灰階 + Alpha 透明度

• 當指定三個值時，則會被解釋為 RGB 或 HSB 值。

• 當指定四個值時，則為 RGB 或 HSB 值 + Alpha 透明度。

注意: color()裡面也可以放入字串喔~，例如 '#fe700e'或者 'rgb(340,100%, 100%)'，但再放入字串的時候就不支援放透明度了

當我們成功設定好顏色後，就可以得到一個有透明度的圓形

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

function draw() {
	noLoop()
	let c = color(255, 201, 100, 40)
	fill(c)
	circle(100, 100, 20);
}

再來試試看使用字串得到的結果

HSB模式

HSB模式是一個360度的環，有色相(hue)，飽和度(saturation)，彩度(value)

那要如何設定成HSB模式呢? 我們可以使用 colorMode() 這個函式

colorMode(HSB)

這樣就設定好HSB模式了，但要注意在此之後，最大值就不是255了，而是360，設定好HSB模式之後的預設會是colorMode(HSB, 360, 100, 100, 1)，只說色相一整圈，飽和度彩度與透明都最高

為了明顯看到顏色的變化效果，這邊使用到mouseX, mouseY兩個P5.js提供的函數，可以直接偵測到游標的座標定位，進而觀測到顏色跟隨滑鼠移動所做出的變化

那接下來我們就來實際看看範例吧

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

function draw() {
	colorMode(HSB)
	fill(mouseX ,100,100)
	circle(mouseX, mouseY, 40);
}

小結

以上就是顏色模式的簡單介紹，也謝謝大家今天的觀看~~

REF

https://www.sprekelmeyer.com/file-prep-101-start-here/cmyk-color-mode/
https://nycdoe-cs4all.github.io/units/1/lessons/lesson_3.2