Consider this sketch. What does it do? Try to figure it out by reading, and by running it.

void setup() {
 size(400, 400);
}
 
void draw() {
  background(220);
  noStroke();
  fill(255, 0, 0);
  circle(100, 100, 50);
}

There are several possible answers, from less to more specific:

1. It draws something.
2. It draws a shape.
3. It draws a circle.
4. It draws red circle over a gray background.
5. It draws red circle over an 86% (220 / 255) gray background.
6. It repeatedly draws: an 86% gray background, and a red circle on top.

Take particular note of the difference between descriptions #5 and #6. This sketch draws the background and then the circle over and over again. It does this because the instructions to do this are inside of draw(), and Processing calls (runs) draw() over and over again.

Also note that at no time do we see just the background, without the circle. This is because the execution model for Processing looks like this:

Now consider this modification.

int x = 100;

void setup() {
 size(400, 400);
}

void draw() {
  background(220);
  noStroke();
  fill(255, 0, 0);
  circle(x, 100, 50);
}

This has exactly the same behavior. It has a different implementation. In the new sketch, the horizontal (x) position of the circle is the value of the x variable.

x is a variable that we defined. Because we define it at the top of the sketch, we can use it in setup() and draw().

There are a few variables that Processing itself defines. Consider this modification, that removes the definition of x, and changes the call to circle() to use mouseX instead of x. mouseX is one of the variables that Processing defines – this is why we can use it without defining it ourselves. You can read about what it does in the Processing reference, but you can probably also figure this out by interacting with the sketch. (Hint: move the mouse over the sketch window.)

One way to visualize what is happening is to draw a data flow diagram. The diagram on the left shows the sketch with the variable x. This variable gets a value when we assign to it: x = 10. The diagram on the right shows what happens when we use mouseX. Each time before draw() is called, it gets a new value by reading the position of the physical mouse (or trackpad) that is connected to the computer. (This is something Processing does, so it happens automatically so far as your sketch is concerned.) (This may remind you of reading the value of a potentiometer in an Arduino sketch.)