Syntax introduced: println(), point(), line(), ellipse(), rect()
0. Download Processing and write a program.
The first thing you need to do is go to www.processing.org and follow the link to download the correct version for your operating system. Once you have it, just run it. An editing window pops up that looks like this:
Type into the editing window this line exactly as I have written it:
println is all in lower case, then an open parenthesis, then a double quotation mark, then the phrase Hello, world!, then another double quotation mark, then a closing parenthesis, then a semicolon. Now click the "run" button. It's the one that looks like a triangle in the upper left of the editing window. The phrase Hello, world! should display in the black console on the bottom of the window, like so:
Below is a screencast of me writing and running the Hello World program.
Try it yourself. Did it work? Yay! You wrote a program. Not too shabby.
You probably noticed a small grey window also popped up next door to the editing window. Let's explore what that's all about next.
1. Plot some shapes to the display window
That little window that popped up is the display window. When you write a program that creates something to look at, it will show up there. By default, Processing sets the origin at the top left corner. The x axis increases to the left and the y axis increases downwards. Increments along the axis are given in pixels. The default window, as shown below, is 100 x 100 pixels.
Let's plot some shapes to the window. Processing has some intrinsic functions to plot primitive shapes. Here is a program that introduces four of them to get you started.
- First, click the "stop" button, which is the one next to the run button that has a little square in the middle of it. The display window should disappear now.
- Copy the lines below exactly as I have written them into the editing window:
println("Hello, world!"); point(50,50); line(10,20,10,70); ellipse(70,20,40,20); rect(60,65,10,30);
- Click the run button. Now let's check out that display window. It should look like this:
There is a point at x=50, y=50. There is a line that extends from x=10, y=20 down to x=10, y=70. There is an ellipse whose center is at x=70, y=20 and whose horizontal axis has a diameter of 40 pixels and whose vertical axis has a diameter of 20 pixels. There is a rectangle whose top left corner is at x=60, y=65, and that is 10 pixels wide and 30 pixels high.
The program you just wrote had four commands, one on each line. Processing executed them in order, then stopped. The first command, println(), tells Processing to print whatever is inside the parentheses to the console. In our example, we printed text. We put all the text inside double quotes so that Processing would know that it is text. We will learn how to print other things to the console later when we explore different variable types.
The next four commands told Processing what kind of a shape to draw and where to draw it. Each of those simple shape commands needs to have a certain number of arguments in order to work. The arguments are the numbers inside the parentheses. For example, the command point() takes 2 arguments and they correspond to the x and y location where Processing should place the point. So,
tells Processing to place a point 50 pixels to the right of the origin and 50 pixels down from the origin.
How would you tell Processing to place a point in the lower left corner of the display window?
The first argument is the number of pixels to the right of the origin. We want the point in the lower left corner, so that's zero pixels away from the left edge. The second argument is the number of pixels down from the origin. We want the point in the lower left corner so that is 100 pixels away from the top.
It is possible to place points with negative values or outside the range of the display window. It's a valid program and you won't get an error message but you won't see the points. You can also change the size of the display window. We'll learn how to do that later on.
The other shapes in the example program each take 4 arguments. line() needs to know the (x,y) pair of the beginning of the line and the (x,y) pair of the end of the line. ellipse() needs to know the (x,y,) coordinates of the center of the ellipse and the diameters of each axis. rect() needs to know the (x,y) coordinates of the top left corner of the rectangle, the width, and the height.
How would you tell Processing to draw a circle with diameter 10 pixels at the center of the display window?
As far as Processing is concerned, a circle is just a special kind of ellipse, one with the major and minor axes equal to each other. The command above tells Processing to place an ellipse with a center at the point (50,50), which is the center of our default display window. Then the other two arguments say that each diameter is 10 pixels across.