p5.js | 色调()函数

在p5.js中，色调()函数可用于设置画布中所有颜色的色相（hue）值，并将所有其他颜色属性（饱和度、亮度）保持不变。

语法

hue(hue)

参数

• hue (Number): 用于设置色相的值，范围是0到360。

示例

function setup() {
  createCanvas(400, 400);
  colorMode(HSL);
  background(0, 0, 50);
  noStroke();
  fill(255);
  rectMode(CENTER);
  rect(width / 2, height / 2, 200, 200);
  hue(120); // 设置色相值为120度
  rect(width / 2, height / 2, 150, 150);
}

解释

上面的示例将画布颜色模式设置为HSL，然后使用黄色对画布进行填充，并在中心绘制一个白色的矩形。最后，hue()函数设置色相值为120度，并在中心绘制一个绿色的矩形覆盖部分白色矩形。

渲染结果

综合示例

function setup() {
  createCanvas(400, 400);
  colorMode(HSL);
  noStroke();
}

function draw() {
  background(255);

  // 左侧橙色方块
  fill(30, 100, 70);
  rect(0, 0, width / 2, height);

  // 右侧操作部分
  fill(0, 0, 90);
  rect(width / 2, 0, width / 2, height);

  // 色相选择器
  for (let i = 0; i < 360; i++) {
    let c = color(i, 100, 50);
    fill(c);
    rect(i, height - 20, 1, 20);
  }

  // 获取鼠标指针下的颜色，并应用于当前画布
  if (mouseY < height - 20) {
    let c = get(mouseX, mouseY);
    hue(c);
    saturation(c);
    brightness(c);
  }
}

解释

上面的示例可以看作一个小型的色相选择器。左侧是一个颜色块，右侧是一个用于选择颜色的条形面板。

你可以点击右侧面板的任何位置以选择新的颜色。色相(hue)、饱和度(saturation)和亮度(brightness)值都会自动应用于当前画布中的各种元素。

渲染结果

关于p5.js中更多的绘画和动画函数，请查看官方文档。