Saturation Experimentation | Processing Sketch

Ian Fike

Below is altered code from the example located at "Examples > Drawing > Pattern" which draws ellipses of different sizes depended on the movement speed of the mouse. I added a color component to this sketch. If the mouse is clicked and held, the saturation of the circles will increase from white to red. Every time that the sketch prints another circle the saturation is increase by 1 on a scale of 0-255. If the mouse is released, the saturation will decrease at the same rate. 

/**

 * Patterns and Saturation 

 * 

 * Move the cursor over the image to draw with a software tool 

 * which responds to the speed of the mouse. When the mouse is

 * pressed, the saturation of the circle will increase from white

 * to darker shades of red. When release, the color will fade back

 * to white

 */

int red = 255;

void setup() {

  size(640, 360);

  background(102);

 }

void draw() {

  // Call the variableEllipse() method and send it the

  // parameters for the current mouse position

  // and the previous mouse position

  variableEllipse(mouseX, mouseY, pmouseX, pmouseY);

}

void variableEllipse(int x, int y, int px, int py) {

  float speed = abs(x-px) + abs(y-py);

  stroke(speed);

  // The duration of mousePressed increase the saturation of 

  // red inside of the printed ellipses

  if (mousePressed && red > 0) {

    red--;

  } else if (mousePressed && red <= 0) {

    red = 0;

  } else {

    red++;

  }

  fill (255, red, red);

  ellipse(x, y, speed, speed);

}

Enjoy!