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.

John Maeda talk

John Maeda wrote a foreword in the Processing book. He's kind of the godfather of the synergy between design, art and computer programming.

Minimal steps for using a font in your sketch

The file FreeSerif-130.vlw, mentioned below in the loadFont function, should be created by clicking on the menu item Tools, followed by Create Font. This opens a window with a list of all fonts available on your computer. Choose one, define it's size and click Ok. This will save a .vlw-file in the data folder inside the folder of your sketch. One remark: save a new started sketch before creating a font!
Some computers ran into memory problems during the lesson. It appears that big fonts make Processing use a lot of memory. The solution is to open the Processing Preferences. Check the selectbox before the line "Increase maximum available memory to" and change the value to 512 (standard set to 256) MB. This should do the trick.
Some Processing apps would not save this setting and would return to the original state after restart of the application.

PFont f;

void setup() {
  size(300, 300);
  f = loadFont("FreeSerif-130.vlw");
  textFont(f);
}

void draw() {
  background(50, 0, 50);
  fill(255, 0, 255, 90);
  
  String message = "Put your text here..!";
  text(message, mouseY, mouseX);
  text("Hello World!", mouseX, 50);
  
  textSize(130);
  for (int i = 0; i < 10; i++) {
    text(i, 100 + (i * 20), 100 + (i*20));
  }
  
}