Vertical Gradient

From Processing

Jump to: navigation, search
Versions: 1.0+
Contributors: matt.patey, REAS
Started: 2008-04-30


This code will render a simple two-color gradient to a new PImage. Of course you can create gradient images manually in an image editor, but it's cool to generate it in-app (plus you can alter the colors on the fly). For a static background you can render this once in setup and then drawing each frame should be pretty quick. I found that in some cases if you use this as a full-window background, you still have to call background(0) first or else you'll get trails.

Source Code

PImage grad;
 
void setup() {
  size(640, 240);
  color c1 = color(255, 0, 0);
  color c2 = color(0, 255, 0);
  grad = generateGradient(c1, c2, 500, 200);
}
 
void draw() {
  background(255);
  image(grad, mouseX, mouseY); 
}
 
// Generate a vertical gradient image
PImage generateGradient(color top, color bottom, int w, int h) {
  int tR = (top >> 16) & 0xFF;
  int tG = (top >> 8) & 0xFF;
  int tB = top & 0xFF;
  int bR = (bottom >> 16) & 0xFF;
  int bG = (bottom >> 8) & 0xFF;
  int bB = bottom & 0xFF;
 
  PImage bg = createImage(w,h,RGB);
  bg.loadPixels();
  for(int i=0; i < bg.pixels.length; i++) {
    int y = i/bg.width;
    float n = y/(float)bg.height;
    // for a horizontal gradient:
    // float n = x/(float)bg.width;
    bg.pixels[i] = color(
    lerp(tR,bR,n), 
    lerp(tG,bG,n), 
    lerp(tB,bB,n), 
    255); 
  }
  bg.updatePixels();
  return bg;
}

Downloads

Related Links

Personal tools