p5.js colorMode()函数

colorMode()函数是p5.js中的一个内置函数，用于让用户在 RGB 或 HSB 颜色选项之间进行选择。默认情况下为RGB颜色模式。因此，用户传递给它的参数对应于红色、绿色和蓝色值。用户通过为这些值传递数字（介于 0 到 255 之间的参数）来创建各种颜色，因此，生成的颜色是红色、绿色和蓝色的混合。还有另一种称为HSB的颜色模式，它使用色调、饱和度和亮度值来定义颜色。

句法：

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

参数：

• 模式：这是必须设置的颜色模式。这可以设置为 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