Processing Experimentation

Creating a Color Gradient


For my experiment, I wanted to change the values of in the Processing example CreateImage, where you are given a buffer of pixels to mess with. The example itself shows a blue gradient that transitions from blue into the background, and is off center. In my experiment, I made everything centered, made the size of the window square, made the image itself smaller, and changed the gradient to go from a bright red to a navy blue.


PImage img;


void setup() {

size(640, 640);

img = createImage(100, 100, ARGB);

for(int i = 0; i < img.pixels.length; i++) {

float a = map(i, 0, img.pixels.length, 255, 0);

img.pixels[i] = color(a, 10, 45, 200);

}

}


void draw() {

background(0);

image(img, 280, 280);

image(img, mouseX-img.width/2, mouseY-img.height/2);

}