# LerpColor seamless motion

**URL:** https://discourse.processing.org/t/lerpcolor-seamless-motion/11303
**Category:** Coding Questions
**Created:** [May 16, 2019, 11:35am UTC](https://discourse.processing.org/t/lerpcolor-seamless-motion/11303 "2019-05-16T11:35:55Z")
**Posts on this page:** 1
**Showing post:** 6

<div class="post-metadata">

### Author: ![humayung](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/humayung/32/6089_2.png) [@humayung](https://discourse.processing.org/u/humayung)
#### Post date: [May 16, 2019, 2:40pm UTC](https://discourse.processing.org/t/lerpcolor-seamless-motion/11303/6 "2019-05-16T14:40:28Z")

</div>

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

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e8bca4cf980531372c41ae96089f49363de6dca7.gif)

---

_[View the full topic](https://discourse.processing.org/t/lerpcolor-seamless-motion/11303)._