The Coder's Handbook

Using Processing

YOUR FIRST PROGRAM

An Example Program

First, open up processing. You’ll see a blank project with some weird name like sketch1032890.


  • Click on File → Save As

    • Find your Computer Science folder on your flash drive

    • Give your project a name, like HelloWorld.

  • Copy the example code below into Processing and run the program.

    • Look carefully at the console output at the bottom of your window.

Code:

void setup()

{

frameRate(1); // slows the program to run 1 frame per second

println(“Hello World”); // prints Hello World then starts a new line

}


void draw()

{

print(“*”); // prints a * each frame on the same line

}


Output after 1 second

Hello World

*


  • Try changing the line of code frameRate(1) to take a different value?

    • What happens with 5? 30?

    • What happens if you delete this line of code?


Output after 1 second, assuming frameRate is 5:

Hello World

*****


Output after 1 second, assuming frameRate is 30:

Hello World

******************************


Output after 1 second if you delete the frameRate() line. This program runs at 60 frames per second.

Hello World

************************************************************

COMMENTS

Using Comments

A comment is a section of coder that doesn't have any effect, but acts as a note for the reader.


You can write comments in your code in two ways:

  • Use // to make a single line into an inline comment.

  • Use /* */ to make a whole chunk of code into an extended comment.


Code:

void setup()

{

// This is an inline comment

/* This is an extended

comment */

}



Hotkeys!


In processing you can select a whole block of code and press CTRL-/ (control and forward slash). Doing so will turn that whole section into a comment. You can do so again to turn the same code back to normal.


This is super useful for temporarily disabling code when debugging.

SETUP AND DRAW

Setup and Draw


In Roboquest, every program started with the go() method. In a normal processing program, you have two “main” methods, called setup() and draw().


  • void setup()

    • This method is called once at the start of the program

    • It is useful for things you only want to have happen one time

  • void draw()

    • This method is normally called 60 times per second

    • You can change this by using the frameRate() command

    • Draw is the main “event loop” that keeps the program running

THE CONSOLE

The Console


The black window where Processing output text is called the console. This is commonly used for text-based programs, but also for debugging our code. Sometimes it helps to print out the value of a variable, or information about what is going on.



Printing


There are two ways to print information:

  • Using the print command will output the data

  • Using the println command will output the data and start a new line


The console in Processing isn't quite as fun as the one you might have at home...

RESOURCES

  • Chapter 2 - Using Processing

  • Chapter 3.1, 3.2 - Setup and Draw