# 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:** 7
**Page:** 1
### Author:  [@ale.moso](https://discourse.processing.org/u/ale.moso)
#### Post date: [May 16, 2019, 11:35am UTC](https://discourse.processing.org/t/lerpcolor-seamless-motion/11303/1 "2019-05-16T11:35:55Z")
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
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [May 16, 2019, 11:45am UTC](https://discourse.processing.org/t/lerpcolor-seamless-motion/11303/2 "2019-05-16T11:45:29Z")
here…
```auto
//
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
---
### Author:  [@humayung](https://discourse.processing.org/u/humayung)
#### Post date: [May 16, 2019, 11:48am UTC](https://discourse.processing.org/t/lerpcolor-seamless-motion/11303/3 "2019-05-16T11:48:19Z")
Hi!
sorry, i’'m not very sure what do you want to get. Please post a picture for better understanding
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [May 16, 2019, 11:55am UTC](https://discourse.processing.org/t/lerpcolor-seamless-motion/11303/4 "2019-05-16T11:55:27Z")
or
```auto
//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
//
```
---
### Author:  [@ale.moso](https://discourse.processing.org/u/ale.moso)
#### Post date: [May 16, 2019, 12:09pm UTC](https://discourse.processing.org/t/lerpcolor-seamless-motion/11303/5 "2019-05-16T12:09:25Z")
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)
```auto
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();
}
}
```
---
### Author:  [@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")
Here is what i get with that idea. Using RGB ColorMode now
```auto
ArrayList colors;
void setup() {
size(700, 200);
colors = new ArrayList();
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;
}
}
```
---
### Author:  [@ale.moso](https://discourse.processing.org/u/ale.moso)
#### Post date: [May 16, 2019, 6:24pm UTC](https://discourse.processing.org/t/lerpcolor-seamless-motion/11303/7 "2019-05-16T18:24:46Z")
This is awesome! many thanks!