[SOLVED] HSB smooth color transition

HSB smooth color transition

I made a Happy Mothers day program that involved text slowly changing colors. I'm using HSB, and slowly changed the Hue value until I got to 255 then jumped back to 0. But this doesn't seem to give that smooth color transition I'm looking for.

This is basically what I'm doing:

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

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

Full program: https://editor.p5js.org/KoderM/sketches/RekPOFctj

Does anybody know how do get a smooth rainbow effect with HSB color values?

Solution

One of the problems with the code wasn't shown. It's the colorMode call, which was set to the default colorMode(HSB), which, as the 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.6.0/p5.js"></script>

You can also use colorMode(HSB, 255); and override the default, then use fill(frameCount % 255, 255, 255); (with optional scaling if desired).

Also, clamping isn't really the correct concept. That's traditionally a min/max algorithm, but we actually want to wrap around to 0.