No sé mucho sobre p5.js. Pero simplemente googlear y ofrecería esta solución.

 let a = 0; let white; let purple; function setup() { createCanvas(400, 400); white = color(255, 255, 255); purple = color(160, 32, 240); } function draw() { background(220); const temp = map(sin(a), -1, 1, 0, 1); fill(lerpColor(white, purple, temp)); rect(20, 20, 50); a += 0.01; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>

Con lerp color, puede crear una implementación que admita aún más colores.

 let white = color(255, 255, 255); // at 0 (-1 on sin) let purple = color(160, 32, 240); // at 0.5 ( 0 on sin) let blue = color(0,0,255); // at 1 (1 on sin) let temp = map(sin(a),-1,1,0,1); if(temp < 0.5){ let temp2 = map(temp, 0, 0.5, 0, 1); result = lerpColor(white, purple, temp2); } else { let temp2 = map(temp, 0.5, 1, 0, 1); result = lerpColor(purple, blue, temp2); }

Con algo de refactorización y más trabajo, esto podría admitir un número arbitrario de colores. Podrías hacer que un pecado atraviese todo el arcoíris.

Un enfoque es colorMode(HSB) . El brillo de la saturación del tono facilita la elección de un tono púrpura (280 de 360), luego cambia la saturación y el brillo para desvanecerse entre la escala de grises y el tono. Rango de saturación y brillo de 0 a 100.

En este caso, me desvanezco entre 0 y 40 en saturación y entre 60 y 100 en brillo. En un extremo, HSB de (280, 0, 100) es blanco puro. En el otro extremo, (280, 40, 60) es violeta.

 let a = 0; function setup() { createCanvas(400, 400); colorMode(HSB); } function draw() { background(220); const v = map(sin(a), -1, 1, 0, 40); fill(280, v, 100 - v); rect(20, 20, 50); a += 0.01; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>

lerpColor , mencionado en esta respuesta , probablemente sea lo mejor para este caso, pero dejaré mi respuesta ya que ofrece cierta capacidad de ajuste que lerpColor podría no tener.