Syntax introduced: ellipseMode(), rectMode(), beginShape(), endShape(), vertex(), smooth(), colorMode(), arc(), bezier(), triangle(), curve()

0. Changing the default shape origins

The default for a rectangle is for its origin to be at the top left corner, and the default for an ellipse is for its origin to be at its center. You can change these defaults by resetting rectMode() and ellipseMode(). For example, if you specify rectMode(CENTER), then the four arguments taken by rect() become the (x,y) coordinate of its center and then the half-width, and half-height, respectively. To revert back to the default, specify rectMode(CORNER). Read about more options at Processing's command reference page for rectMode() [2]. If you specify ellipseMode(CORNER), then the four arguments taken by ellipse() become the (x,y) coordinate of the upper left corner of a rectangle that circumscribes the ellipse. Then the other two arguments are the width and length of that bounding rectangle. Read about more options at Processing's command reference page for ellipseMode() [3].

It is my personal preference not to change these defaults. I find it easier to construct my mental map of where I want to place shapes in a composition working within the framework specified by the defaults. However, there isn't a right or wrong approach, in my opinion. See the code below for a sample of code and its corresponding display window that demonstrate what happens when rectMode() and ellipseMode() are changed.

Output from the program above.
Click here to see a text description.

Output from the program above showing a white square in the upper right corner with a grey square a little to the right and below and on top. Also includes a large circle in the lower left corner with two smaller circles of the same size inside of it. One is filled in black, and the other is a gray circles and is a little to the right and below and on top of the black circle.

1. Color

My compositions are more fun if they include color. The default way to specify the color of things in Processing is with (r,g,b) values. This is red, green, and blue. Remember how if you got really close to an old picture-tube television set, you could see the red, green, and blue lights in different arrangements that made up the whole picture? Same basic idea. These colors are the opposite of paint in that if you add the full amount of each one you get white, not black (or really a muddy brown if you use actual paint). You can also specify the color by its hue, saturation, and brightness (h,s,b) or in hexadecimal. To switch to hsb from the rgb default, you have to use colorMode(HSB). If you want to use hexadecimal, just use the appropriate value (which you can find in the Tools menu or probably by googling).

I usually just use rgb values, so the rest of this discussion assumes rgb. Each value of red, green, and blue can range from 0 to 255. Trial and error is certainly one way to come up with a pleasing color palette, but a better way is to use the color selector in Processing. Go to the Tools menu and select "Color Selector" from the drop-down menu. See figure below for a snapshot of the Color Selector. Once this is open, you can play around to find the color you want. The numbers corresponding to that color are given, and you can just type them into your program in the appropriate place.

Annotated screenshot of Processing's color selector.

Any function that took an argument to define its greyscale can be a color instead. This includes stroke(), fill(), and background(). You can also vary how transparent or opaque objects look by changing the alpha value. This is an optional fourth argument to specifying color. It also ranges from 0 (totally transparent) to 255 (completely opaque). Completely opaque is the default so by not specifying a fourth number you will just get completely opaque colors.

Watch the screencast below to watch me add some colors to a composition (4:24).

2. Other shapes and custom shapes

Processing has intrinsic functions to draw several shapes besides points, lines, ellipses and rectangles. I'm just going to list several of them here along with a link to each of their reference pages on Processing's website. My goal in this tutorial is not to write a textbook. Anyway, there are several good ones already out there that I already told you about, so you should read the appropriate sections of those if you want more information about any of these:

1. arc() [4]
2. bezier() [5]
3. triangle() [6]
4. curve() [7]

But what if you want to draw your own shape? Like, say, how about the lightning bolt on Roy Hobbs' bat that later became a patch on the whole team's uniform in The Natural? I've found a way to work a baseball reference into all my other courses, so why not? In case you don't know what I'm talking about, this is it:

New Yorks Knight uniform replica from The Natural.

Source: Yesteryear Sports [8]

Your friends for this task are beginShape(), endShape(), and vertex(). What you do is use a beginShape() endShape() pair to surround a list of vertex() commands to draw the outline of your shape point by point. Processing will connect up a series of vertices with straight lines. If your last command is endShape(CLOSE) then Processing with connect up the last point with the first point so you can make a closed shape without having to specify the first point again. On the other hand, if you don't want that, then just do endShape(). Here's my lightning bolt along with the program that draws it as a yellow lightning bolt on a black background.

Screenshot image of lightning bolt program output. A yellow lightning bolt on a black background.

Notice in the program above there are two commands that we haven't specifically covered yet. They are pixelDensity() and noStroke().If you have a big-definition display screen on your computer, such as Apple's Retina display or Windows' High-DPI display, then using pixelDensity(2) allows your computer to use all its pixels when it renders one of your drawings. Add it in and then take it out and you'll be able to see the difference in how shapes are rendered on your screen. The noStroke() function tells Processing not to draw an outline around your shape.

Syntax introduced: int

0. Why use variables?

When you were drawing your own shapes with vertex(), you probably did what I did and used trial and error to place each vertex until you got the shape to look the way you wanted it to. Or maybe you thought ahead and drew it on graph paper first. Now let's say you like that shape but you wish it was in a slightly different place in the display window. Ugh! What a pain! You'll have to go back and recalculate every vertex. (This is true even if you used graph paper. bummer!) I don't want to do this, and I'll probably mess up somewhere along the way. Ah, but if you use variables then you can solve the annoying recalculation problem!

Here's the same lightning bolt as I drew before, but now I'm going to define two variables to use as the origin. Every subsequent vertex will be written relative to that origin. For example, in the original program the first vertex was vertex(20,10). This time around I'm going to declare an integer variable named x and assign it the value of 20. I'm also going to declare another integer variable called y and assign it the value of 10.

Now that x = 20 and y =10, I can tell Processing to do vertex(x,y) instead. The second vertex was vertex(20,60). I want to write this in terms of x and y so I write vertex(x,y+50). I go through all the vertices in the shape, and with some simple mental arithmetic I transform each one into an equivalent value using x and y. Below is the lightning bolt program in which the vertices are set by variables.

Screenshot image of lightning bolt program output. A yellow lightning bolt on a black background.

Recap

Up near the beginning of the program I declared two variables and I named them "x" and "y." I gave them those names because it makes intuitive sense to me to think of horizontal positions as x values and vertical positions as y values. However, I could have named those variables anything I wanted and still used them as x and y values. I could have called them "duck" and "goose" or whatever. I could even have used "y" for horizontal and "x" for vertical (although I think this choice would confuse me a lot later -- not the best idea). In the function vertex(), the first value specified is always the horizontal position and the second value specified is always the vertical position. It does not matter what those values are named.

1. Naming variables

I will now amend the statement, "it doesn't matter what they are named," to tell you that actually there are a few rules about naming variables in Processing. The names can't start with a number and can't have spaces in them. It is also a really really good idea not to give a variable a name that Processing already uses for something else. There's a list of Processing variables at their website.

When I defined the two variables, "x" and "y" up at the top of the program, I didn't just write x = 20. I wrote int x = 20. That tells Processing that I want to make an integer variable and name it x and I am assigning the value 20 to x. An integer means a whole number with no fractional parts. 3 is an integer, -3 is an integer, 0 is an integer, but 3.5 is not an integer. You can declare a variable and assign a value to it in more than one step and some people prefer this for clarity. For example

is equivalent to

And,

is equivalent to

You will have to experiment with the syntax that makes the most sense to you. There are other types of variables besides integers and we will get to them later on. Now back to the program.

Upon first glance it doesn't really look like we have saved ourselves any effort here compared to writing it where we named every vertex position explicitly. After all, we have typed a lot more characters by declaring variables, haven't we? Plus we had to do some addition and subtraction in our head to rewrite the position of each vertex. But let's say I want to scooch the whole lightning bolt over and down little bit so it's more centered in the display window. That is easy-peasy lemon-squeezy as my first grader says. All I have to do is change the values of x and y and recalculate nothing else at all. Let's do it. Instead of making x = 20 and y = 10, we'll make x = 30 and y = 20. The code for the new lightning bolt program after having changed the x and y assignments to 30 and 20 is below.

Screenshot of the output of the new lightning bolt program. The yellow lightning bolt is centered on the black background.

There. I like the way that looks better.

While you are at it, is the "Quiz yourself" exercise above building your spatial visualization skills or object visualization skills, or both, or neither?

Syntax introduced: for, <, {}, !<, >, !>, =, !=, string

0. Use a for loop to make repetitive calculations

Let's say it's a thunderstorm and we want to draw a whole bunch of our stylish lightning bolts to the screen. Luckily computers were built precisely to make repetitive calculations quickly. One way to take advantage of a computer's ability to do this is with a for loop. Check out the program below.

The major new thing in this program is the section that goes:

The line begins with the command for and then inside the parentheses are three parts, separated by semicolons.

Part 1 is the initialization

The part that says int i = 0; initializes the variable to loop over. In our program we are naming that variable i and setting it equal to zero.

Part 2 is the test

The next part that says i < 400; is a test. If the test is true, all the commands inside the curly braces are executed one at a time in order using the value of the loop variable wherever that variable appears. If the test fails, Processing ignores all the commands inside the curly braces and moves along to the rest of the program. In our program that test checks to see whether the value of the loop variable is less than 400 or not.

Part 3 is the increment

The third part that says i = i + 40 is the increment. When the for loop finishes the first time using the initial value of the loop variable, it goes back to the top of the for loop, increments the loop variable by the amount indicated (it adds 40 in this program), then it reassigns the variable to the new value. It checks if the test is still true, and if it is, it executes all the commands inside the curly braces with the new value of the loop variable. It repeats incrementing and executing until the test fails, and then it moves on and doesn't try to execute the for loop any more times.

Screenshot of a portion of a program that has a for loop, showing the initialization, test, and increment.

So put it all together and here is what this for loop does. It starts out with i = 0; It runs all the commands inside the curly braces using 0 every time it sees an "i." Then it adds 40, checks whether 40 is less than 400. It is, so it runs all the commands inside the curly braces using 40 every time it sees an "i". Then it adds 40, checks whether 80 is less than 400. It is, so it runs all the commands inside the curly braces using 80 every time it sees an "i." This goes on until i gets to 400 or higher. When that happens, Processing skips all the commands inside the curly braces and moves on to see if there are any commands to run after the curly braces.

What all this accomplishes is to draw the lightning bolt over and over again, each time moving it 40 pixels to the right. See how much trouble we have saved by writing a loop rather than writing multiple beginShape/endShape chunks!

Screenshot of the output of the new lightning bolt program.

Let's go through the new parts of this program that make it work [9] (and a close-captioned version [10]).

1. More details about for loops

The initial variable can be a negative, zero, or positive. You can declare the variable before the for loop starts. The test can involve any relational operator, which is a fancy way of saying anything that compares two values. We will learn more about relational operators later but here are the most common ones:

• less than, not less than: <, !<
• greater than, not greater than: >, !>
• equal to, not equal to: =, !=

The increment can be anything you want and it can be positive or negative.