p5.js | lerpColor()函数介绍

简介

lerpColor()函数是p5.js中一个用于颜色渐变的函数，它可以帮助你在两种颜色之间生成一个平滑的颜色渐变。lerp是linear interpolation的缩写，意指线性插值，它将两个已知颜色之间的距离按一定比例进行插值，得到一个新的颜色。

语法

lerpColor(c1, c2, amount)

c1和c2是两个颜色，amount是一个介于0和1之间的值，表示颜色渐变的程度，通常是一个浮点数。

返回值

lerpColor()返回一个p5.Color对象，表示两个颜色之间按指定比例混合后的颜色。

示例

let c1 = color(255, 0, 0);  //红色
let c2 = color(0, 255, 0);  //绿色

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  for(let i=0; i<10; i++){
    //将红色和绿色按比例混合
    let c = lerpColor(c1, c2, i/10);
    //绘制渐变的矩形
    fill(c);
    rect(0, i*40, 400, 40);
  }
}

效果如下图所示：

以上代码是一个绘制颜色渐变矩形的例子。首先我们定义了2个p5.Color对象，分别表示红色和绿色。然后在画布上绘制10个宽40像素的矩形，根据当前迭代次数i决定颜色渐变的程度，最后将混合后的颜色用于填充矩形。

在这个例子中，我们通过循环计算两种颜色之间的插值，由此得到了10种不同的平滑渐变颜色。当然也可以根据需要来调整插值的比例和迭代次数。

总结

lerpColor()函数是p5.js中非常实用且易于使用的颜色渐变函数。它可以帮助你轻松实现平滑的渐变效果，同时带来许多创意的设计和绘图可能性。在实际开发中，可以根据业务需求灵活运用该函数，创造出更加丰富和有趣的交互和视觉效果。