How to fade between multiple colors?

Processing Coding Questions
1

Hi I can understand how to fade from one color (and back again) using code such as the one bellow.
But what if I want to move through a series of 3 or more color’s? Have you managed it??
;

void setup() {
  size ( 300, 300);
}

void draw() {
  fill (lerpColor(color(255, 0255, 0), color(0, 55, 100), (((millis()/5000)%2==0)?millis()%5000:5000-millis()%5000)/5000.0));

  ellipse(150, 150, 150, 150);
}
2

Hi.

Quick’n’dirty pseudo-code off the top of my head

limit = 0.5; // or somwhere between 0.0 and 1.0.
fade = some value between 0.0 to 1.0
if (fade < limit) color = lerpColor(color1, color2, fade/limit);
else color = lerpColor(color2, color3, (fade-limit)/(1-limit));
fill (color);
etc..

So just use more lerpColor statements.
For more colors you can expand on several if-else if (or just if) sections.
Or something like that.
Nice millis trick btw.

3

Hello,

Example with frameCount as the timer:

void setup() 
  {
  size ( 300, 300);
  }

void draw() 
  {
  if (frameCount >= 0 && frameCount < 5*60)    
    {  
    color c = lerpColor(color(255, 255, 0), color(0, 55, 100), (frameCount - 0)/float(5*60));  
    fill (c);
    } 
 
  if (frameCount >= 5*60 && frameCount < 10*60)    
    {  
    color c = lerpColor(color(0, 55, 100), color(0, 255, 255),  (frameCount-5*60)/float(5*60));  
    fill (c);
    }   
  
  ellipse(150, 150, 150, 150);
  }

It needs some work… I will leave that with you.

:)

4

Not exactly the answer but i’m gonna put this here anyway in case it helps

int max = 1000;

void setup() {
  size(400, 200);
  colorMode(HSB, max, 1, 1);
}

void draw() {
  color hue = color(frameCount % max, 1, 1);
  background(hue);
}
5

Thanks so much guys definitely on the right path now :slightly_smiling_face::slightly_smiling_face:

1 Like