p5.js | Función lerpColor()

La función lerpColor() se usa para interpolar dos colores para encontrar un tercer color entre ellos. La cantidad de interpolación entre los dos colores se puede establecer mediante los parámetros amt . La interpolación de color depende del modo de color actual.

Sintaxis:

lerpColor(c1, c2, amt)

Parámetros: esta función acepta tres parámetros, como se mencionó anteriormente y se describe a continuación:

c1: Es un p5.Color que representa el primer color a partir del cual se interpolará el color final.
c2: Es un p5.Color que representa el segundo color al que se interpolará el color final.
amt: Es un número entre 0 y 1 que determina qué color se utilizará más para la interpolación. Un valor cercano a 0,1 preferiría más el primer color y un valor cercano a 0,9 preferiría el segundo color para la interpolación.

Valor devuelto: Devuelve un elemento p5.Color con el color interpolado.

El siguiente ejemplo ilustra la función lerpColor() en p5.js:

Ejemplo:

function setup() {
  createCanvas(500, 350);
  textSize(18);
    
  text("From Color", 20, 20);
  fromColor = color("red");
  
  text("Lerped Color", 150, 20);
  
  text("To Color", 300, 20);
  toColor = color("blue");
    
  text("Adjust this slider to change the"+
             " amount of lerping", 20,  200)
  alphaSlider = createSlider(0, 100, 50);
  alphaSlider.position(20, 220);
  alphaSlider.style('width', '250px');
}
  
function draw() {
  lerpedColor = lerpColor(fromColor, toColor, alphaSlider.value() / 100);
  
  fill(fromColor);
  rect(30, 30, 50, 100);
  
  fill(lerpedColor);
  rect(170, 30, 50, 100);
  
  fill(toColor);
  rect(310, 30, 50, 100);
}

Producción:
lerping-slider