p5.js colorMode()用法及代碼示例

colorMode() 函數是 p5.js 中的一個內置函數，用於讓用戶在 RGB 或 HSB 顏色選項之間進行選擇。默認情況下為 RGB 顏色模式。因此，用戶傳遞給它的參數對應於紅色、綠色和藍色值。用戶通過為這些值傳遞數字(介於 0 到 255 之間的參數)來創建各種顏色，因此，生成的顏色是紅色、綠色和藍色的混合。還有另一種稱為 HSB 的顏色模式，它使用色調、飽和度和亮度值來定義顏色。

用法:

colorMode(mode, [value])
colorMode(mode, value1, value2, value3, [valueA])

Parameters:

mode:這是必須下注設置的顏色模式。這可以設置為 RGB 或 HSB。它相當於紅/綠/藍或色相/飽和度/亮度。
value:它是一個數字，表示 0 到 255 之間的所有值的範圍。它是一個可選值。
value1:它是一個數字，表示紅色或色調值的範圍。
value2:它是一個數字，表示取決於當前顏色模式的綠色或飽和度值的範圍。
value3:它是一個數字，表示藍色或亮度/亮度值範圍的範圍，具體取決於當前顏色模式
valueA:它是一個數字，表示 alpha 值的範圍，介於 0 和 255 之間。它是一個可選值。

以下程序說明了 p5.js 中的 colorMode() 函數：

範例1：

Javascript


function setup() { 
    createCanvas(600, 600);
    colorMode(HSB, 360, 100, 100);
    noLoop();
}
  
function draw() { 
    background(0, 0, 100);
    
    for (var i = 0; i < 10; i = i + 1) {
        var x = 50 + i * 50;
        var y = 300;
        var h = i * 20;
        var s = random(20, 80);
        fill(h, s, 100);
        rect (x, y, 40, 40);
    }
}

輸出：

範例2：

Javascript


function setup() {
    createCanvas(600, 400);
    background(0);
    colorMode(RGB, 78);
}
  
function draw() {
    fill(0, 0, 0, 10);
    rect(-1, -1, 1401, 901);
    stroke(2 * frameCount, mouseX/10, 255);
    translate(width/2, height/2);
    for (let i = 2; i < 400; i = i+20) {
        rotate(
            noise(frameCount * 0.0004) * (1000/mouseX)
        );
        line(i, 0, ((mouseX/10) + i), 0);
    }
}

輸出：

參考：https://p5js.org/reference/#/p5/colorMode

相關用法

注：本文由純淨天空篩選整理自adwityaajha16cse大神的英文原創作品 p5.js colorMode() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。