我不太了解p5. js。但是简单的谷歌一下就会提供这个解决方案

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.5.0/p5.js"></script>

使用lerp color，你可以创建支持更多颜色的实现。

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);
}

通过一些重构和更多的工作，这可以支持任意数量的颜色。你可能会有一个罪恶通过整个彩虹。

一种方法是colorMode(HSB)。Hue Saturation Brightness可以很容易地选择一个紫色色调（360中的280），然后移动饱和度和亮度以在灰度和色调之间渐变。
在这个例子中，我在0到40之间渐变饱和度，在60到100之间渐变亮度。在一个极端，HSB为（280，0，100）是纯白的，在另一个极端，（280，40，60）是紫色的。

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.5.0/p5.js"></script>

this answer中提到的lerpColor可能最适合这种情况，但我将保留我的答案，因为它提供了lerpColor可能没有的一些调整。