EARTH 801
Computation and Visualization in the Earth Sciences

Lesson 3: Comments, Setup and Draw, Simulate Movement

PrintPrint
 

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() {
  smooth();
  background(0);
  noStroke();
  fill(250, 230, 5);
  beginShape();
  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);
  endShape(CLOSE);
  //increment the value of x by 1 each time the program loops through draw()
  x++;
}

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.

0. Comments

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()

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.

2. Draw()

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().

3. Incrementing with ++

The section of the code that goes:

x++;

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.

4. Put it all together

In pseudo-English, here's what the code example at the top of the page does

  • starts with comments to say what the code does
  • set the x and y variables
  • the setup block says how big the screen will be
  • the draw block has two things in it: The first thing is the list of commands to draw the lightning bolt shape and the second thing is the command to increment the x variable

that's it!

Quiz Yourself!