HSB 平滑的颜色过渡

Question

我制作了一个“母亲节快乐”程序，其中包含文字缓慢变化的颜色。我正在使用 HSB，并慢慢改变色调值，直到我达到 255，然后跳回 0。但这似乎并没有提供我正在寻找的平滑颜色过渡。

这基本上就是我正在做的事情：

fill(clamp(frameCount*0.2, 255), 255, 255);

function clamp(c, cap){
  
  do { c -= cap } while ( c > cap );
  
  return c
  
}

完整节目：https://editor.p5js.org/KoderM/sketches/RekPOFctj

有人知道如何使用 HSB 颜色值获得平滑的彩虹效果吗？

Answer 1

代码的一个问题没有显示出来。这是 colorMode 调用，它被设置为默认值 colorMode(HSB)，与 docs say:

By default, this is colorMode(HSB, 360, 100, 100, 1)

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB);
}

function draw() {
  fill(frameCount % 360, 100, 100);
  rect(0, 0, windowWidth, windowHeight);
}

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

您也可以使用 colorMode(HSB, 255); 并覆盖默认值，然后使用 fill(frameCount % 255, 255, 255);（如果需要，可选择缩放）。

此外，钳位并不是真正正确的概念。传统上这是一个 min/max 算法，但我们实际上想要返回到 0.

HSB 平滑的颜色过渡

HSB smooth color transition

javascript

colors

p5.js

hsb