Processing: Creative Coding and Computational Art

Animation is a perfect example of this effect. If at least 12 images per second move in
front of your eyes, you begin to see continuous movement. But of course, you are really
only looking at a series of static images.
The frameRate(30) function call at the bottom of the setup() function controls the rate
at which the animation runs. You can pass different values to the frameRate() call as a
single argument between the parentheses to change the speed of the animation. If you
don’t include the frameRate() call, the default speed is 60 frames per second. I suggest
trying some different values in the call to see how it affects the speed and smoothness of
your animation. The draw() function below setup() controls animation in Processing.
Simply by including it, an animation loop is created in your sketch, which I’ll cover in a lot
more detail later.
In the draw() function, I update the background color, which helps create the illusion of
the bouncing ball. Try commenting out the background(0) line by putting two forward
slashes (//) in front of the command, and watch what happens. The effect is actually
pretty cool, and what you would do if you wanted the background to be incrementally
painted, rather than entirely updated each loop iteration.
Next I call the ellipse function, ellipse(xpos, ypos, wdth, ht);, passing in the four variables
for the ball’s x position, y position, width, and height. Then I increment the xpos and
ypos variables using the assignment shortcut operators. This gets the ball moving.
However, the ball will never stop, so I need to do some thinking for the computer and set
up some conditions for when the ball should deflect or bounce off the frame.
The two conditional statements are essentially identical, except of course one controls the
x movement and the other the y movement. So what I describe following for x also applies
to y.
I begin the conditional with if. if is a reserved word in Java and Processing that expects a
condition to follow it surrounded by parentheses. Conditional statements rely on Boolean
logic (true or false) to decide how to respond. The default test is for truth. So when I write
if(someStatement == true), I could also just write if (someStatement), which automatically
checks for truth. If the conditional statement is true, program execution occurs on
the next line following the test statement. For example:
if (5>4)
print("hello");
The program should output hello. Although you can write your statement the way I did
previously without curly braces, when there is only one line of code after the if statement,
I don’t recommend it. Instead, I recommend always writing it like this:
if (5>4) {
print("hello");
}
The curly braces make it easier to read your conditional statements, and as you begin to
write more complex statements, you’ll need the curly braces anyway. If you do not use the
curly braces, then only the next line of code will be executed if the condition is true.
CODE GRAMMAR 101
79
3