(3) What did I just do?

Ok, so you tried it and got to draw circles in the window. But how did that happen? In processing one can insert comments in the code by entering "//". All text on the line after the two forward slashes are ignored by processing. The first program can be explained with inline comments like this:

It might still seem a little magical that this short code of just two routines (called procedures) does what you have seen it does. Lets try an addition. Colors are made up of one number, between 0-255 that represents 0=black, 128=grey and 255=white, and all the grey shades in-between. Lets change the code to:

// setup() is called once when the program starts execution
void setup () { 
  // Open a window. First 400 is the width in pixels, second 400 the height
  size(400, 400);
}

// draw() is called once every frame update (default 30 per second)
void draw () {
  // Set the fill color to a random grey scale
  fill(random(0,255));
  
  // Draw an ellipse at position X=mouseX, Y=mouseY. The mouseX/Y are built in 
  // variables that are updated with the mouse pointer
  // First 20 is the width and second 20 is the height, in pixels
  ellipse(mouseX, mouseY, 20, 20);
} 

If you enter this (or just add the "fill(random(0,255));" line, and run, you should get this (after moving the mouse over the window):

Now, that might look a little nicer. The "random(0,255)" will simply pick a random number between 0 (black) and 255 (white). What if you do not want to have that long "tail" of circles. Then you could add another command in your program;

// setup() is called once when the program starts execution
void setup () {
  // Open a window. First 400 is the width in pixels, second 400 the height
  size(400, 400);
}

// draw() is called once every frame update (default 30 per second)
void draw () {
  // Clear the screen setting the color to 255 (white)
  background(255);

  // Set the fill color to a random grey scale
  fill(random(0, 255));

  // Draw an ellipse at position X=mouseX, Y=mouseY. The mouseX/Y are built in
  // variables that are updated with the mouse pointer
  // First 20 is the width and second 20 is the height, in pixels
  ellipse(mouseX, mouseY, 20, 20);
}

This, when executed will make the screen look like this:

I think I prefer the "tail". But what about real color? Easy, instead of just one value (for grey) we use a set of three values in the "fill()" call. These three value are RED, GREEN, BLUE, or simply known as RGB. For instance (255,0,0)=RED. Check out this link to find colors and their values. Now add this (and remove the "background()" call;

// setup() is called once when the program starts execution
void setup () {
  // Open a window. First 400 is the width in pixels, second 400 the height
  size(400, 400);
}

// draw() is called once every frame update (default 30 per second)
void draw () {
  // Set the fill color to a random color
  fill(random(0, 255), random(0, 255), random(0, 255));

  // Draw an ellipse at position X=mouseX, Y=mouseY. The mouseX/Y are built in
  // variables that are updated with the mouse pointer
  // First 20 is the width and second 20 is the height, in pixels
  ellipse(mouseX, mouseY, 20, 20);
}

This gives you this nice output:

Now, try random background color by yourself!