P5.js开发之——颜色及变化(6)

发表于 分类于 ， ， 阅读时长 ≈ 2 分钟

一 概述

  • 用于设置颜色的color方法
  • 对color进行颜色三原色提取的red(红)、green(绿)、blue(蓝)及alpha(透明度)
  • 对color进行hue(色调)、brightness(亮度)、saturation(饱和度)及lightness(光度)提取
  • 对color进行lerpColor(混合)

二 color(设置颜色)

2.1 color的格式

语法 示例 说明
color(gray, [alpha]) color(65) 0-255之间的数值
color(v1, v2, v3, [alpha]) color(255, 204, 0) 红绿蓝(透明度)
color(value) color('magenta')
color('#0f0')
color('rgb(0,0,255)')		 颜色字符串
color(values) color([255,0,0,100]) 颜色数组
color(color) let c=color(255,0,0);let c2=color(c); 给color赋值color

参数说明：

参数 类型 说明
gray 数字 一个定义白与黑之间的数值
alpha 数字 透明度值（默认为 0 至 255）
v1 数字 红彩值或色调值，需在被定义的范围内
v2 数字 绿彩值或饱和度值，需在被定义的范围内
v3 数字 蓝彩值或亮度值，需在被定义的范围内
value 字符串 颜色字符串
values 数字数组 一个有红、绿、蓝及透明度值的数组
color p5.Color

2.2 示例

代码

1
2
3
4
5
6
function draw()
{
    let c = color([255,0,0,100]);//设置颜色
    fill(c);//填充颜色
    rect(15, 20, 35, 60);//绘制图形
  }

效果图

三 color三原色及透明度提取

3.1 说明

方法 用法 说明
red red(color) 从颜色或像素数组中提取红色彩值
green green(color) 从颜色或像素数组中提取绿色彩值
blue blue(color) 从颜色或像素数组中提取蓝色彩值
alpha alpha(color) 从颜色或像素数组中提取透明度值

3.2 示例(red为例)

代码

1
2
3
4
5
6
7
8
9
10
function draw()
{
  let c = color(255, 204, 0); // 定义颜色值c
  fill(c); // 填充颜色
  rect(15, 20, 35, 60); // 绘制左侧区域
  
  let redValue = red(c); // 获取c中红色
  fill(redValue, 0, 0); // 用获取的红色填充(红,绿,蓝)
  rect(50, 20, 35, 60); // 绘制右侧区域
}

效果图

四 hue(色调)、brightness(亮度)、saturation(饱和度)及lightness(光度)

4.1 说明

方法 用法 说明
hue hue(color) 从颜色或像素数组中提取色调值
brightness brightness(color) 从颜色或像素数组中提取 HSB 的亮度值
saturation saturation(color) 从颜色或像素数组中提取饱和度值
lightness lightness(color) 从颜色或像素数组中提取 HSL 的光度值

4.2 示例

代码

1
2
3
4
5
6
7
8
9
10
function draw()
{
  let c = color(156, 100, 50, 1);
  fill(c);
  rect(15, 20, 35, 60);
  let value = lightness(c); // Sets 'value' to 50
  fill(value);
  rect(50, 20, 35, 60);
  
}

效果图

五 颜色混合(lerpColor)

5.1 用法说明lerpColor(c1, c2, amt)

参数 示例 说明
c1 color(218, 165, 32) 从这颜色开始插入
c2 color(100) 在这颜色结束插入
amt 0.5 两个值之间插入的量，介于 0 和 1 的数字

5.2 示例

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function draw()
{
  let from = color(218, 165, 32);//混合颜色开始
  let to = color(72, 61, 139); //混合颜色结束

  let interA = lerpColor(from, to, 0.33); //混合颜色A
  let interB = lerpColor(from, to, 0.66); //混合颜色B

  fill(from);
  rect(10, 20, 20, 60); //单独绘制颜色开始

  fill(interA);
  rect(30, 20, 20, 60); //单独绘制混合颜色A

  fill(interB);
  rect(50, 20, 20, 60); //单独绘制混合颜色B

  fill(to);
  rect(70, 20, 20, 60); //单独绘制颜色结束
 
}

效果图

六 参考

  • 参考文献——颜色