LerpColor seamless motion

Processing Coding Questions
1

Hi dear community,

I want to made gradients where colors move from one to another constantly changing but whitout a blink like a flow of colors. Any ideas in how acomplish this?

Many thanks

2

here…



//
float amt=0; 
//
// ---------------------------------------------------------------
//
void setup()
{
  // init
  size(800, 600);
  frameRate(13);
} // func 
//
//
void draw() 
{ 
  background(255);

  stroke(255);

  color from = color(255, 0, 0);
  color to = color(0, 0, 255);
  color interA = lerpColor(from, to, amt);

  fill(interA);
  rect(110, 110, 100, 100);
  amt+=0.01;
} // func 
//

Chrisir

2 Likes
3

Hi!
sorry, i’'m not very sure what do you want to get. Please post a picture for better understanding

4

or

//https://www.processing.org/reference/lerpColor_.html

float amt=0;
int x=0;

void setup() {
  // init
  size(1400, 600);
  //frameRate(13);
} // func 

void draw() { 
  color from = color(255, 0, 0);
  color to = color(0, 0, 255);
  color interA = lerpColor(from, to, amt);

  stroke(interA);
  line(x, 0, 
    x, height);

  amt+=0.001;
  x+=1;
} // func 
//
2 Likes
5

Thank you very much @Chrisir
But I need the start and end color to change over time

@humayung here is what I got (not working), using HSB for simplification. (would be better if it work for RGB)

int num = 10;
int step = 20;

//colors
color from, to;

// hue
float h1 = 0;
float h2 = 20;

int timer = 0;

void setup() {
  size(200, 100);
  colorMode(HSB, 360, 100, 100);
  noStroke();
} 

void draw() { 
  from = color (h1%360, 100, 100);
  to = color (h2%360, 100, 100);
  
  for (int x = 0; x < num; x ++) {
    color interA = lerpColor(from, to, (float)x*.1);
    fill(interA);
    ellipse(step/2 + x * step, height/2, step, step);
  }
  updateColors();
} 

void updateColors() {
  if (millis() - timer >= 50) {
    h1 ++;
    h2 ++;
    timer = millis();
  }
}
6

Here is what i get with that idea. Using RGB ColorMode now

ArrayList<Color> colors;
void setup() {
  size(700, 200);
  colors = new ArrayList<Color>();
  target = color(random(255), random(255), random(255));
  from = color(random(255), random(255), random(255));
  
  // Push initial color for shown up on the screen
  for (int i = 0; i < width/w; i++) {
    pushColor();
  }
  noStroke();
} 

color start, end;
color target;
color from;
int count = 0;

//Change these two variable for different behaviour
final int range = 90; // color space
final float w = 10; // speed / detail

void draw() { 
  background(0);
  for (int i = 0; i < width; i+=w) {
    fill(colors.get(floor(i/w)).c);
    rect(i, 0, w, height);
    //ellipse(i, height/2, w, w);
  }
  popColor(); // remove oldest color
  pushColor(); // add new color on the first
} 

void popColor() {
  colors.remove(0);

}

// this function pushs next color from the color space
void pushColor() {
  float amount = (float)count/range; // get position
  color c = lerpColor(from, target, amount);
  colors.add(new Color(c));
  count++; // keep track color position in the color space
  count = count % range; // cycle counter
  if (count == 0) {
    from = target;
    target = color(random(255), random(255), random(255));
  }
}

// Not the best way to store color as an object.
class Color {
  color c;
  Color(color c) {
    this.c = c;
  }
}

lerp_color

5 Likes
7

This is awesome! many thanks!