gradiente that changes throughout time and ending as a specific gradient

cristina

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() {
//Gradients
  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

Chrisir

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.

;-)

cristina

Thanks Chrisir! That's better..

frameCount... never used..

cristina

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

amnon

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);
  }
}

cristina

that's amazing! Thank you! :D