Computation and Visualization in the Earth Sciences

Lesson 3: Comments, Setup and Draw, Simulate Movement


Syntax introduced: void, setup(), draw(), //, /* */, ++, --

Let's quit messing around and get to what's fun about Processing. Let's make stuff move on the screen. I'll start with my lightning bolt because why not, we already know what that looks like. Here's a program that draws one lightning bolt to the screen and moves it horizontally.

//move the lightning bolt horizontally

//declare some variables first
int y = 20;
int x = 10;

//setup function
void setup() {
  size(490, 200);

//draw function where the action happens
void draw() {
  fill(250, 230, 5);
  vertex(x, y);
  vertex(x, y + 50);
  vertex(x + 10, y + 40);
  vertex(x, y + 100);
  vertex(x + 10, y + 90);
  vertex(x, y + 100);
  vertex(x + 40, y + 65);
  vertex(x + 30, y + 75);
  vertex(x + 40, y + 25);
  vertex(x + 30, y + 35);
  vertex(x + 40, y);
  //increment the value of x by 1 each time the program loops through draw()

This program looks fundamentally different from previous ones we've seen so far. For one thing, there are discrete paragraphs instead of just a list of commands. I'm going to go through what the new syntax does.


Now is a good time to talk about comments, which I haven't done explicitly yet. Notice in all my samples of programs there are some lines that start with two slashes (//). Those are comments. They are like the notes you make in the margin of a cookbook telling you why the recipe is written the way it is. Processing ignores them but they are super useful because they tell somebody else in plain English what your code is doing. This is also important when you go back to a program a few days, weeks, years later and you can't remember what you were thinking or what that program does. Having those comments there helps a lot. If you want to write a longish paragraph of an explanation, you can either start each line with the two slashes or else you can type /* at the beginning, write several lines, and then type */ at the end. Everything between the /* */ will be commented out.

Another good use of comments is when you have a program that is working fine, then you add some things to it, then all of a sudden it's not working anymore. Rats! In that case, I try to isolate the problem by commenting out the new parts one by one and seeing if the program runs without those parts. Then I can usually narrow down how I've screwed up.

1. Setup() and Draw()

In the program above, I first write a comment explaining what the program does. Then I declare some variables. Since these variables are declared at the top of the program before anything else happens, they are defined that way for the entire rest of the program. Then comes a paragraph that looks like:

void setup() {

  some commands


This is the setup() block. setup() is a function whose job is to do things like set the window size or the background color, or to load data files, media, and fonts that might be used in the program. Processing runs through setup() exactly once. There can only be one setup() block per program. If you declare a variable inside setup(), then that variable is not available outside of setup(). The setup() block starts out with the key word void. That tells Processing that setup() is a function that doesn't return an answer. Contrast this to a mathematical function such as f(x) = x + 1. This is a function whose job is to add one to any value of x you give it, and then tell you the result. If we were writing a function like that, we'd have to specify the variable type as the key word instead of void.

After the setup() block there is a paragraph that looks like

void draw() {

  some commands


This is the draw() block. draw() is a function whose job is to loop over the commands contained inside it continuously until you tell it to stop. You can kind of think of it as an infinite for loop in which the time between subsequent runs through the loop is the refresh rate of your computer screen. You need to have a draw() block if you want continual looping in your program. Almost all the rest of the programs we will write from now on will contain a setup() and a draw() block in them. If you declare a variable inside draw(), then that variable is not available outside draw().

The section of the code that goes:


Is the line that takes advantage of the continuous looping of the draw() function. All the commands inside the beginShape()/endShape() pair form the lightning bolt just like in earlier programs, in which x = 10 and y = 20 (remember we set those at the top of the program). Then we are telling Processing to take the value of x and add one to it. That's what "x++" means. Next time the lightning bolt will be plotted with the origin of the lightning bolt at x = 11 and y = 20. Each time the program loops through draw(), it plots the lightning bolt, recalculates a new value for x, and plots the lightning bolt again shifted one pixel to the right of where it was before. It looks like the lightning bolt is moving because your eyes can't refresh as fast as your screen.

cartoon Eliza alerting you that instructions come nextHere's a screencast of me explaining how this program works, and you can see what it looks like when it is running, too.
Video explanation of Lightning Bolt program.
E. Richardson

Quiz Yourself!

Can you figure out what you would change in the moving lightning bolt program if you wanted the lightning bolt to move continuously to the left instead of to the right? How about up or down?

Click for answer...

If you said to keep the program the same except change the command x++ to x-- (two minus signs) then you are right! If you want to make the lightning bolt move down continuously change x++ to y++ and if you want the bolt to move up continuously change x++ to y-- (two minus signs).