gradiente that changes throughout time and ending as a specific gradient

edited December 2014 in Questions about Code

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

Answers

  • 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?

  • Answer ✓

    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

Sign In or Register to comment.