(4) Adding mouse clicks

Let's take that last program with nice colors and add so that we can start and stop the drawing of circles by pressing the left mouse button, and maybe drawing rectangles when pressing the right button.

// 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));

  // Check if mouse button is pressed and if it is left button
  if (mousePressed && (mouseButton == LEFT)) {
    // 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);

} else if (mousePressed && (mouseButton == RIGHT)) {
    // Draw an square 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
    rect(mouseX, mouseY, 20, 20);
  }
}

The output looks like this:

The "if" statement is looking at the condition in the paranthesis and if true, executes that code, otherwise not. When comparing values it is important to use "==" for equal and not just "=". The "&&" is for "and". I.e. both the "mousePressed" needs to be true as well as the "mouseButton == LEFT". 

To get help on what commands do and example on how to use them, click on Help->Reference in the menu on the window:

You will then see this:

And here are all the built in commands listed. Each one has a small example to it. Try to find the help for "iF" or "rect".