Open Processing and look at this Getting Started document. Make sure you can edit, save and run code.

Read the Coordinates System and Shapes tutorial. Make sure you understand how you can create various shapes such as: rectangles, ellipses and lines. Have a look at the Colour tutorial as well.

Other things to look at: stroke, strokeWeight

Variables

In order to more things around or react to user input you will need to be able to store information. You do this using a variable. You must first define a variable by declaring its name and its data type. A data type is what kinds of values a variable can hold. For instance a x-coordinate would be an int which is short for integer. The basic types in Processing are listed on the reference page under data.

See the following learning pages as well: variables, integers and floats, true/false

Scope is simple where a variable is able to be used. If you create variables outside of the setup and draw functions then it is said to have global scope and can be used anywhere. See the page about scope

Processing has a simple but powerful  structure that you can use to animate things and get input from the user. Processing first runs any code that comes before the setup function - you can use this to create a global variable (see above). Then Processing runs the setup function - but only once. This is a good place to 

If you want to be able to react to user input you will need to start defining some functions that will be called based on user interface events. For instance someone clicks the mouse button - Processing then will execute whatever code you place inside a function called mousePressed.

A function can be thought of as block of code that is given a name. We can define with this:

void mousePressed() {

}

For a better example see mousePressed()