Noise ellipses with color and alpha

float p = 0.0;

void setup() {
  size(300,300);
  smooth();
}

void draw() {
  noStroke();
  background(255);

  float n = noise(p) * 20;
  fill(0,0,255,100);
  ellipse(mouseX - 20 + n, mouseY - 20 + (5 * n), n * 20, n * 20);

  fill(255,0,0,100);
  float t = noise(p + 3.02) * 20;
  ellipse(mouseX - 20 + t, mouseY - 20 - (t * 5), t * 20, t * 20);

  fill(255,255,0,100);
  float u = noise(p + 5.01) * 20;
  ellipse(mouseX - 20 - (5 * u), mouseY - 20 + u + 5, u * 20, u * 20);

  fill(0,255,0,100);
  float v = noise(p + 2.02) * 20;
  ellipse(mouseX - 20 + (5 * v), mouseY - 20 + v + 5, v * 20, v * 20);

  p += 0.01;
}


/**
 * for saving frames
 */
void keyPressed() {
  String myTime = year()
    + "-" + month()
      + "-" + day()
        + "_" + hour()
          + "." + minute()
            + "." + second();
  if (key=='s') {
    saveFrame("noise_random-" + myTime + "_F#####.png");
  }
}

Save a frame to an image

void keyPressed() {
  String myTime = year()
    + "-" + month()
      + "-" + day()
        + "_" + hour()
          + "." + minute()
            + "." + second();
  if (key=='s') {
    saveFrame("random-" + myTime + "_F#####.png");
  }
}

Minimal steps for adding an image to your sketch

If you want to add an image to your sketch, do the following. Be sure to add the image file in the sketch's folder.

PImage img;

void setup() {
  size(300,300);
  smooth();
  img = loadImage("mondrian.jpg");
}

void draw() {
  image(img,0,0, 300,300);
}

Color in short

color c1 = color(255,0,0); // r = 255 g = 0 b = 0 values
color c2 = color(127); // r = b = g = 127 -> grey
color c3 = color(127,60); // r = b = g = 127 -> grey, with alpha channel of 60
color c4 = color(0,255,0,100); // r = 0 g = 255 b = 0 and alpha channel of 100
// the alpha channel ranges from 0 to 255. 0 is transparent, 255 opaque

Different color notations

Processing supports different color notations. RGB for colorvalues in Red, Green and Blue, ranging from 0 to 255. HSB for Hue, Saturation, Brightness in different ranges: hue from 0 to 360, the other two from 0 to 100.

// different color notations
size(300,300);

// RGB notation
colorMode(RGB);
color c = color(203,145,245);
background(c);

// HSB notation
colorMode(HSB);
color c2 = color(20,255,255);
fill(c2);
ellipse(120,40,40,40);

for (int g = 0; g < 12; g++) {
  fill(g * 12,255,255);
  ellipse(g * 20,g * 20,20,20);
}

// hex notation
color r = color(#22ffff);
fill(r);

rect(50,170,30,30);

Hex notation is also used a lot on the internet, mainly in CSS files; they represent a RGB color value in hex. 00 represents 0, FF represents 255. 127 is 7F. Here a small example. You can use for-loops to change color values to make gradients.