Program structure and output

In programming, the stuff you “write” when you “write” a program is called source code. It almost always consists of plain, simple text.¹⁾ The source code you write is stored in files called source code files—sometimes shortened to simply sources or code. Thus, source code files are text files made up of sets of instructions written in a particular programming language that express what you'd like the program to do.

Some languages start executing a program at the first bit of program text that is in the program's source code file. Other languages start a program's execution at some magical point in the code that someone needs to tell you about—that is, they begin at a predefined entry point. Processing is actually both.

Below is one of the simplest Processing programs you can write. When executed, it will print an important message about cranberries.²⁾

cranberries_basic_mode.pde

println("Cranberries are high in antioxidants.");

This is an example of a program written in what Processing calls its Basic Mode. In Basic Mode, the program's execution will begin at the first statement in the source code file. It will then continue statement-by-statement until it reaches the end of the file.

Here's a program with two statements:

cranberries_and_more.pde

println("Cranberries are high in antioxidants.");
println("Some blueberries too.");

Processing's Basic Mode is an extremely easy way to program. However, the rules of Basic Mode state that you are not allowed to define any functions in Basic Mode—which as we shall see later is quite a serious limitation. Therefore, for the remainder of this text we are going to pretend that Processing's Basic Mode doesn't exist and focus entirely on what Processing calls its Continuous Mode. We describe that next.

Processing will automatically switch to Continuous Mode when you define at least one function in your program. (This is why you are not allowed to define functions in Basic Mode.) In Continuous Mode, Processing will look for a definition of a function called setup, and it will use this function as the point where the programs execution begins. Below is the Continuous Mode equivalent of the Basic Mode example above.

cranberries_continuous_mode.pde

void setup() {
  println("Cranberries are high in antioxidants.");
}

This program consists of a definition of the setup function that has only one statement in it. If you run this program, you will discover that it too prints out an important message about cranberries.

The basic structure of the setup function definition without any other code is:

void setup() {
}

The code that is written between the pair of curly braces is called the body of the setup function.

We will talk in greater depth about functions in a few chapters. For now, what you need to know is that in a typical Processing program, while you might find program code before

void setup() {

and/or after the matching }, the program will actually start at the first statement in the setup function's body, that is the first bit of code after

void setup() {

The line

  println("Cranberries are high in antioxidants.");

is an example of a program statement. A program statement is the smallest complete executable element in a programming language.³⁾ Program statements are analogous to sentences in natural languages. In Processing, a semicolon is used to mark the end of a statement. If you try executing any of the programs above without the semicolons at the end of the statements, the Processing compiler won't know that it has reached the end of a statement and will get confused when it tries to understand the remainder of the code.

In the above example, the setup function has only one statement in it. Typically, your program's setup function will have many more:

program cranberries2.pde:

void setup() {
  println("Cranberries are high in antioxidants.");
  println("Chickpeas are high in tryptophan.");
  println("Tomatoes are high in lycopene.");
}

Program statements and other things written a programming language are well-suited for getting your program to do what you want. That's their whole purpose! And if you write your programs using good style, which you should learn how to do throughout this series, your programs should be relatively straight-forward to someone with a decent knowledge of the programming language to understand.

However, there will be times when you will want to include text in your code only to help human readers. For example, you might want to include some information about who authored the program, when it was written, licensing information, etc. That is what comments are for.

TODO

Programmers call the results produced by a program its output. Processing renders output primarily to two different places: the console and the canvas. We discuss each of these below.

A console in computing is a window or some other entity that is used for text-based interaction. About the time dinosaurs were being converted to oil, text-based interfaces using consoles were the dominant sort of user interfaces used in computing. In modern computing, the graphical user interface has replaced the console as the dominant form of interaction with the user. However, it is something of a dirty little secret that consoles still exist for many GUI programs–they are just hidden by default.

People who write GUI-based programs typically use the console as a place to show extra information that normally wouldn't interest a user, for example additional error and warning messages. Such messages can often help to diagnose a problem with the program (e.g., a program crash).⁵⁾

In Processing, there is a console built into the IDE that you can use however you want. It is the dark box toward the bottom of the window (Figure TODO). Thus, when you run a Processing program from the Processing IDE, you will be able to see and use the console without having to do any extra work.

Sending text messages to the console can be accomplished with two predefined Processing functions: print and println. Here is an example of a Processing program that uses println to output a message to the console:

cranberries.pde

void setup() {
  println("Cranberries are high in antioxidants.");
}

The above code consists of a definition of the setup function in which there is a call to or invocation of the println function. The program will produce the following console output when you run it:

Cranberries are high in antioxidants.

Notice the double quotation marks around the text. These are important. They tell println that everything between them is a string of text characters that should be treated as a unit.

The print function is identical to println except for one small but important detail. The println function will print what you ask it to print and then move the cursor (the point where the next bit of text will be printed) to the beginning of a new line. In other words, println is short for “print line”. The print function on the other hand prints what you ask it to print and then places the cursor immediately at the end of what it printed.

The difference between print and println can be readily understood by examining the examples below.

Using print:

void setup() {
  print("Cranberries ");
  print("are ");
  print("high in ");
  print("antioxidants.");
}

produces the following console output:

Cranberries are high in antioxidants.

Using println:

void setup() {
  println("Cranberries ");
  println("are ");
  println("high in ");
  println("antioxidants.");
}

will output:

Cranberries
are 
high in 
antioxidants.

The functions print and println can also be used to print out numbers and the results of calculations:

void setup() {
  println(63);
}

or

void setup() {
  println(63+11);
}

You can mix things up:

void setup() {
  print("Sixty-three plus eleven");
  print(" is ");
  print(63+11);
}

Notice that when you place double quotes around a calculation, it does not do the math:

void setup() {
  print("63+11");
  print(" is ");
  print(63+11);
}

The console in Processing is typically used for printing out diagnostic and similar information; rarely is it used as the primary form of output. Most people who use Processing use the canvas for this. The canvas is where Processing draws its graphics.⁶⁾

TODO: coordinate system

The rect function is an example of a function that accepts multiple parameters or arguments–values that are passed into a function for it to use. In Processing, parameters are placed inside the parenthesis of a function call and if there is more than one parameter, they must be separated with commas.

The rect function takes four parameters: the first two specify where to draw it; that is, the x and y coordinates of the upper left corner within the canvas.⁷⁾ The next two specify the size as width and height in pixels.

The following code will draw a rectangle whose upper left corner is at the upper left corner of the canvas. The rectangle will be 40 pixels wide and 20 pixels high.

void setup() {
  rect(0, 0, 20, 10);
}

To draw a larger rectangle, you might write:

void setup() {
  rect(0, 0, 48, 24);
}

To draw the same rectangle 5 pixels to the right and 10 pixels lower, you would write:

void setup() {
  rect(5, 10, 48, 24);
}

To draw more than one rectangle, just make more than one call to the rect function. They will be drawn in the order you write them.

void setup() {
  rect(0, 0, 48, 24);
  rect(5, 10, 48, 24);
}

or

void setup() {
  rect(0, 0, 48, 24);
  rect(5, 10, 48, 24);
  rect(10, 20, 48, 24);
}

We have used integers only as parameters above. However, Processing will also accept floating-point numbers (e.g., 16.67) for any of the parameter values as well.

Processing's ellipse function is used to draw ellipses and circles. The order and meaning of parameters is essentially the same as for the rect function: x position, y position, width, and height. However, in the ellipse function, the x and y position values refer to where the origin (i.e., center) of the ellipse is.⁸⁾

Thus, to draw a circle with diameter of 40 pixels so that it fits into the top corner of the canvas, you would write:

void setup() {
  ellipse(20, 20, 40, 40);
}

To change this to an ellipse that is 48 pixels wide and 24 pixel tall:

void setup() {
  ellipse(24, 12, 48, 24);
}

To move the origin of the ellipse to the upper-left corner of the canvas (i.e,. 3/4 of the ellipse is off the canvas):

void setup() {
  ellipse(0, 0, 48, 24);
}

To draw more than one rectangle, just make more than one call to the ellipse function. They will be drawn in the order you write them.

void setup() {
  ellipse(20, 20, 24, 24);
  ellipse(25, 25, 24, 24);
  ellipse(30, 30, 24, 24);
}

or

void setup() {
  ellipse(24, 12, 48, 24);
  ellipse(24, 12, 32, 16);
  ellipse(24, 12, 16, 8);
}

Again, parameter values may be integers of floating-point numbers.

TODO

Processing provides a lot more control over what you can draw and how (including rendering images and graphic versions of text), but for the remainder of this text we will limit ourselves to the above elements.

You will have noticed that so far everything that Processing has drawn has been on a grey background using one pixel wide black lines and white filling. All of these can be changed.

The color of the canvas' background can be changed by using the background function. The width, color and other properties of lines and borders is set with the strokeWeight, stroke and noStroke functions. You can change the way shapes are filled with the fill and noFill functions. To change any of these, call the functions with the desired parameters before calling the function that draws the shape.

The following program draws a red and green circles with 2 pixel borders on a blue background.

void setup() {
  // set the background color using an RGB values
  background(0, 0, 200);
 
  // make the pen two pixels wide
  strokeWeight(2);
 
  // make the pen red color using RGB values
  stroke(255, 0, 0);
  // make shapes fill with a dark red color using RGB values
  fill(192, 0, 0);
 
  ellipse(30, 30, 50, 50);
 
  // make the pen red color using RGB values
  stroke(0, 255, 0);
  // make shapes fill with a dark green color using RGB values
  fill(0, 192, 0);
 
  ellipse(70, 70, 50, 50);
}

In keeping with the spirit of this text being about programing concepts rather than the Processing language, we will not delve into this any further at this point. If you want to learn more, everything you need to know about these (and more!) is simply and concisely documented on the Processing reference Web pages (http://processing.org/reference/) under the Color and Attributes headings.

The default size of Processing's canvas is 100 by 100 pixels. This is rarely the size you actually want the canvas to be. Fortunately, it's really easy to change the size of the canvas to something else using Processing's built-in size function. The most common way to invoke the size function is with two parameters: the first specifies the width (in pixels) of the canvas, the second the height (in pixels):

void setup() {
  size(320,180);
  // The rest of your code goes here ... //
}

Aaah … that's better. Now we have some room to work.