Processing

From Mech
Jump to navigationJump to search

Overview

Processing is an open source programming language and IDE based on Java. It is free, works on PC/Mac/Linux, and is easy to learn. Processing lets the programmer quickly make visual objects and interactive programs. It is also easy to communicate with a serial port, so programs can interact with microcontrollers. This wiki page will describe how to get Processing, create a simple program, open a serial port, and use an external library to create a GUI (graphical user interface).

Download

Processing can be found here. Download, unzip and install Processing. This will create two important folders. The first is the folder you have unzipped. It contains the actual Processing program. The second folder is something like Documents/Processing, depending on your platform. This folder is where you store your projects and add libraries.

Resources

Download Processing

Processing Basics

Processing Language Reference

Serial Library

Internal and External Libraries

GUI Library

A Simple Program

Processing IDE

Processing is designed to allow people who are unfamiliar with programming to quickly get up and running making visually compelling programs.

A Processing file is called a sketch. The IDE is shown at the right. A sketch is saved as a .pde in its own folder with the same name and opens in a tabbed format.


A simple Processing sketch

A simple Processing sketch is shown at the right. The IDE has several icons at the top which allow you to run your code, stop running code, save and open code, and export your project. At the bottom of the IDE is a debugging window that you can write to with the print() and println() functions. Processing is object oriented, which basically means that all functions are data structures, and all of your code will run in functions.

All Processing code has at least two major functions, setup() and draw().

setup() is the first function to run. In it you define the size of the window that Processing opens, how fast it updates, and initialize any variables or other functions. setup() runs only once.

draw() runs after setup(). draw() will be called a certain number of times a second, as defined in frameRate() in setup(). This means that draw() functions as an infinite loop. Typically you use draw() to update your graphics. You can also use draw() to check the status of variables , the mouse position, and other objects.


The sketch above contains the following code:

/*
Nick Marchuk
02/23/2010
The basic form of a Processing sketch
*/

// global variables
int x, y;

// setup() function
// this function is the first part of the code to run
// use it to setup propertie of the program and initialize variables
void setup() {
  size(400,400); // size(x,y) of the window in pixels
  frameRate(30); // call the draw() function at 30 frames per second to update the window
  background(30,30,220); // set the background color of the window in (red, green, blue), see Tools->Color Selector
  x = y = 0;
  println("Program Started!"); // print some text to the debug window
}

// draw() function
// this function acts as your infinite loop, running as often as defined in frameRate in setup()
void draw() {
  x = mouseX;
  y = mouseY;
  println("cursor at: " + x + ", " + y);
}

Note the sections used:

  • An area of comments stating who made the code and when, and the purpose of the code
  • Global variables. Remember that variables declared in a function, like in setup() or draw(), are local and their values will not be remembered between multiple calls of the function, so global variables will be needed, but try not to use too many, their use is not good programming style. They will eat up your memory and can get confusing. It is much better to pass variables between functions instead of using globals if at all possible.
  • void setup(). This function runs first and only once. We use it to:
    • set the size of the window in pixels
    • set the frameRate, how many times draw() will be called per second
    • set the background color of the window, in rgb
    • initialize the global variables x and y
    • write some text to the debug window to let us know the program is running
  • void draw(). In this case when draw() is called we put the value of the mouse position into the variables x and y and print them to the debug window.

Running this sketch will produce a blue window and a stream of text in the debug window. Hit the escape key or the stop button to end the program.

Another Simple Program

Lets edit the simple program and add some objects. Lets declare a function that will take the position of the mouse and change the color and radius of a circle and inversely change the background color of the window. Lets also move the circle back and forth across the screen.

code here

Serial Port Communication with Processing

To get Processing to interact with a microcontroller we will open a serial port and read and write to it. What you read and write will depend on what you plan to do. This section will describe how to see the available comm ports, initialize one, write to it and read what comes in.

A Graphical User Interface (GUI) with Processing

A GUI contains elements like check boxes, radio buttons, regular buttons, labels and text entry. While it is possible to write your own custom objects to perform the function objects found in a GUI (see the Examples->Topics->GUI->Button example), it would be even better to use a library that contains all of these elements. Processing does not come with a library of GUI objects, but there are several external libraries created by labs and individuals around the world with GUI objects. Check the external libraries available here (scroll down).

We will use the Graphic Interface library controlP5. Download the associated .zip file and unzip in a folder called libraries in the folder that contains your project folder. (Your file structure should look like:

  • My Documents
    • Processing
      • MyProject
        • MyProject.pde
      • libraries
        • controlP5

All external libraries should be put in this libraries folder)


A Template for a GUI using Serial Communication in Processing

This section will describe a template for Processing projects that use a GUI interface and serial communication. It is often a challenge to move code between pcs when the serial port is hard coded for one pc because the name and number of comm ports differs on every pc, particularly when the pc has bluetooth. This template attempts to solve this problem by listing all of the available comm ports and allowing the user to select the port they wish to use when the program loads. It contains all of the framework necessary to setup the serial communication and use common GUI objects.