Search code examples
javascriptcolorsp5.jshsb

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.