p5.js中如何通过正弦波实现两种自定义颜色的平滑过渡

原有黑白过渡实现 #

已实现的黑白正弦过渡代码如下：

let a = 0;

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

function draw() {
  background(220);
  fill(map(sin(a), -1, 1, 0, 255));
  rect(20, 20, 50);
  a += 0.01;
}

对应HTML依赖引入：

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

原有实现核心逻辑是将正弦函数sin(a)的固定返回值范围[-1, 1]映射到0-255的单通道灰度区间，作为fill()的参数实现黑到白的平滑过渡。由于仅传入单个颜色参数时p5.js会默认按灰度值渲染，自然无法得到彩色过渡效果。

紫白过渡修改方案 #

要实现紫色到白色的正弦过渡，只需要把单通道灰度映射改为RGB三通道独立映射即可：

• 确定两端颜色基准：白色固定为RGB(255,255,255)，示例选用标准紫色RGB(128, 0, 128)，可自行调整三个数值修改紫色的色调、深浅
• 对R、G、B三个颜色通道分别做正弦值映射，每个通道的映射区间对应该通道在紫色、白色下的取值
• 将三个通道计算得到的数值同时传入fill()函数，就能得到平滑无断层的紫白过渡效果

修改后的完整可运行代码：

let a = 0;
// 紫色端RGB值，可按需调整
const purpleR = 128;
const purpleG = 0;
const purpleB = 128;

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

function draw() {
  background(220);
  // 三通道同步做正弦插值，实现紫到白的平滑过渡
  let r = map(sin(a), -1, 1, purpleR, 255);
  let g = map(sin(a), -1, 1, purpleG, 255);
  let b = map(sin(a), -1, 1, purpleB, 255);
  fill(r, g, b);
  rect(20, 20, 50);
  a += 0.01;
}

如果需要调整过渡速度，修改a += 0.01的步长值即可，数值越大过渡动画越快。

内容的提问来源于stack exchange，提问作者Oliwczak12