p5.js | 颜色()函数

简介

p5.js是一个用于创作互动式图形、动画和声音的JavaScript库。颜色()函数是p5.js库中的一个功能强大的函数，用于处理颜色和色彩。

使用方法

创建颜色对象

let c = color(255, 0, 0); // 使用RGB值创建红色的颜色对象

color()函数接受3个参数，分别为红、绿和蓝（RGB）的通道值。每个通道的取值范围为0-255，其中0表示没有颜色，255表示该颜色通道的最大强度。通过传递不同的RGB值，可以创建不同颜色的对象。

获取颜色的RGB值

let r = red(c);   // 获取颜色对象c的红色通道值
let g = green(c); // 获取颜色对象c的绿色通道值
let b = blue(c);  // 获取颜色对象c的蓝色通道值

red()、green()和blue()函数分别用于获取给定颜色对象的红、绿和蓝通道的值。返回值均为介于0-255之间的整数。

混合两种颜色

let c1 = color(255, 0, 0);
let c2 = color(0, 255, 0);
let mixed = lerpColor(c1, c2, 0.5); // 在c1和c2之间按照0.5的权重混合颜色

lerpColor()函数用于在两种颜色之间按照给定的权重进行混合。权重取值范围为0-1，其中0表示完全使用第一个颜色，1表示完全使用第二个颜色。

设置画布颜色

function setup() {
  createCanvas(400, 400);
  background(220); // 设置画布背景颜色为灰色
  fill(255, 0, 0); // 设置填充颜色为红色
  stroke(0, 0, 255); // 设置描边颜色为蓝色
  rect(100, 100, 200, 200); // 绘制矩形
}

在p5.js中，可以使用background()、fill()和stroke()函数来设置画布的背景、填充和描边颜色。这些函数可以接受与color()函数相同的参数，通过修改这些颜色属性，可以为图形和背景设置不同的颜色效果。

总结

在p5.js中，颜色()函数是处理颜色和色彩的一个重要函数。通过创建颜色对象、获取颜色的RGB值以及混合不同颜色，可以实现丰富多彩的图形和动画效果。强大的p5.js库使得处理颜色变得简单和灵活。