Learning Processing: A Beginner's Guide to Programming Images ...

x = 5;
x = a + b;
x = y - 10 * 20;
x = x * 5;
A common example is incrementation. In the above code, circle X starts with a value of 100. If we
want to increment circleX by one, we say circleX equals itself plus one. In code, this amounts to
“ circle X � circle X � 1; ” .
Let’s try adding that to our program (and let’s start circleX with the value of 0).
Example 4-3: Varying variables
int circle X = 0;
int circleY = 100;
void setup() {
size(200,200);
}
void draw() {
background(255);
stroke(0);
fill(175);
ellipse(circleX,circleY,50,50);
circleX = circleX + 1;
}
An assignment operation that increments
the value of circleX by 1.
Variables 51
What happens? If you run Example 4-3 in Processing , you will notice that the circle moves from left
to right. Remember, draw( ) loops over and over again, all the while retaining the value of circleX in
memory. Let’s pretend we are the computer for a moment. (Th is may seem overly simple and obvious, but
it is key to our understanding of the principles of programming motion.)
1. Remember circleX circle � 0 and circleY circle � 100
2. Run setup(). setup() Open a window 200 � 200
3. Run draw().
• Draw circle at (circle (circleX, circleY circle ) → (0,100)
• Add one to circleX circle
circleX circle � 0 � 1 � 1
4. Run draw()
• Draw circle at (circle (circleX, circleY circle ) → (1,100)
• Add one to circleX circle
circleX circle � 1 � 1 � 2
5. Run draw() draw(
• Draw circle at (circle (circleX, circleY circle ) → (2,100)
• Add one to circleX circle
circleX circle � 2 � 1 � 3
6. And so on and so forth!
fi g. 4.5
Examples of assigning a new value to a variables.
Practicing how to follow the code step-by-step will lead you to the questions you need to ask before
writing your own sketches. Be one with the computer.