Posts Tagged ‘ processing

Gradient Backgrounds With Processing

I came across the need to make a gradient background for a visualization prototype I was working on for a course. We were using processing, and here is the code that I came up with to accomplish it. Usage should be fairly straightforward, and it should be easy to modify for any needs anyone has.

class GradientBackground{
  color[] colors;
  int c_alpha;
  
  GradientBackground(color[] t_colors, int t_alpha){
    colors = t_colors;
    c_alpha = t_alpha;
    float w = width;
    int colorWidth = (int)((w / (colors.length-1)));
    int colorHeight = height;
    for(int colorIndex = 0; colorIndex < (colors.length-1); colorIndex++){
      setGradient(colorIndex*colorWidth, 0, colorWidth, colorHeight, colors[colorIndex], colors[colorIndex+1]);    
    }
  }

  void setGradient(int x, int y, float w, float h, color c1, color c2 ){
    float deltaR = red(c2)-red(c1);
    float deltaG = green(c2)-green(c1);
    float deltaB = blue(c2)-blue(c1);
    
    for (int i=y; i<=(y+h); i++){
        for (int j = 1; j<=w; j++){
          color c = color(
            (red(c1)+(j)*(deltaR/w)),
            (green(c1)+(j)*(deltaG/w)),
            (blue(c1)+(j)*(deltaB/w)),
            c_alpha
          );
          stroke(c);
          fill(c);
          //point(j+x, i); //this line is buggy, doesnt work properly with most recent version of processing
          rect(j+x, i,1,1);
      }
    }
  }
}