p5.js 的 colorMode() 函数

colorMode() 函数是 p5.js 库中用于设置颜色模式的函数。p5.js 支持 RGB、HSB 和 HSL 三种颜色模式。

语法

colorMode(mode);
colorMode(mode, max);
colorMode(mode, max1, max2, max3);

• mode：字符串值，表示颜色模式。可选值有 'RGB'、'HSB'、'HSL'。
• max：数字值，表示最大值。在 'RGB' 模式下，max 可以是 255 或 1（默认为 255）；在 'HSB' 和 'HSL' 模式下，max 可以是 360 或 100（默认为 100）。
• max1、max2、max3：数字值，分别表示红、绿、蓝（或色相、饱和度、亮度）的最大值。在 RGB 模式下，只有 max1 有用，它表示所有颜色通道的最大值（默认为 255）；在 HSB 和 HSL 模式下，max1、max2、max3 分别表示色相、饱和度、亮度的最大值（默认为 360、100、100）。

示例

function setup() {
  createCanvas(400, 400);
  colorMode(RGB); // 默认的颜色模式为 RGB
}

function draw() {
  // 使用 RGB 模式下的颜色
  background(100,200,150);
  
  colorMode(HSL, 360, 100, 100); // 切换到 HSL 模式
  stroke(240, 100, 50); // 使用 HSL 模式下的颜色
  line(0, 0, width, height);
  
  colorMode(HSB, 360, 100, 100); // 切换到 HSB 模式
  fill(60, 80, 100); // 使用 HSB 模式下的颜色
  ellipse(width/2, height/2, 50, 50);
}

在上面的例子中，我们先将默认颜色模式设为 RGB。接着在 draw() 函数中，我们调用 colorMode() 函数切换到 HSL 和 HSB 模式，并使用相应模式下的颜色函数绘制图形。

运行这个例子，你会看到背景色（background() 函数），以及下方的直线（line() 函数）和中央的圆形（ellipse() 函数）都分别使用了不同模式下的颜色。

注意事项

• 在 HSB 和 HSL 模式下，设置颜色时需要用到对应的色相、饱和度和亮度值，需要对这些值有一定的理解。
• 在使用 SysEx 模式时，一旦调用了 colorMode() 函数，将无法返回到默认模式。如果需要使用默认模式重新绘制图像，可以手动计算 RGB 值。

参考链接

• colorMode() | reference | p5.js
• RGB color model - Wikipedia
• HSL And HSV - Wikipedia