#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# gradiente that changes throughout time and ending as a specific gradient

edited December 2014

Hello everybody,

I'm quite new to coding and I've been trying to create a gradient, let's call it A, that throughout time becomes gradient B. So basically I have the gradient to begin with and the end with, and I want both colors of the first gradient (A) to gradually become the colors of the second gradient (B).

This is the code I've been trying to create (it doesn't work).

``````// Constants
int s = second();
color b1,b2,c1,c2,q1,q2;

int c;
int b;
int q;

int x;
int y;
float w;
float h;

void setup() {
size(displayWidth, displayHeight);
// Define colors
c1 = color(#F47F7C);
c2 = color(#DC2048);
b1 = color(#563081);
b2 = color(#A5CD39);
q1 = color(q);
q2 = color (q);

}

void draw() {
setGradient(0, 0, width,height, b2, b1,s);
setGradient(0, 0, width,height, c2, c1,s);
setGradient (0, 0, width, height, q1, q2, s);

}

void setGradient(int x, int y, float w, float h, int c1, int c2, int s ) {
noFill();

if (s == 0) {  // Left to right gradient
for (int i = x; i <= x+w; i++) {
float inter = map(i, x, x+w, 0, 1);
int z = lerpColor(c1, c2, inter);
stroke(c);
line(i, y, i, y+h);
}
}
else if (s == 59) {  // Left to right gradient
for (int i = x; i <= x+w; i++) {
float inter = map(i, x, x+w, 0, 1);
int k = lerpColor(b1, b2, inter);
stroke(b);
line(i, y, i, y+h);
}
}
else {
for (int i = x; i <= x+w; i++) {
for(int c = c+1; c< b; c++){
float inter = map(i, x, x+w, 0, 1);
color q = lerpColor(q1,q2, inter);
stroke(q);
line(i, y, i, y+h);
}
}
}
}
``````

Any help would be very very much appreciated!!

Thanks! Cristina

Tagged:

• edited December 2014 Answer ✓

you might want to edit your post and post your code correctly

see sticky post "forum rules..." and links therein

I was thinking of frameCount and lerp to go from one gradient to the other.

;-)

• Thanks Chrisir! That's better..

frameCount... never used..

• my biggest doubt is to lerp betwenn 4 colors basically.. do you know what I mean?

Your code doesn't run and it seems overcomplicated. You already mentioned the solution yourself, all you have to do is to gradually move from the two A colors to the two B colors. In the meantime the gradient that is created will change automatically as well.

Code Example

``````color[] colors = { #F47F7C, #DC2048, #563081, #A5CD39 };
int numFrames = 120;

void setup() {
size(800, 600);
}

void draw() {
background(255);
float timeInterpolation = float(frameCount % numFrames) / numFrames;
color leftColor = lerpColor(colors[0], colors[2], timeInterpolation);
color rightColor =lerpColor(colors[1], colors[3], timeInterpolation);
for (int x=0; x<width; x++) {
float lineInterpolation = x / float(width);
color c = lerpColor(leftColor, rightColor, lineInterpolation);
stroke(c);
line(x, 0, x, height);
}
}
``````
• that's amazing! Thank you! :D