Intro to Processing

The purpose of this class is to help you design and program user interfaces, not to just pick an interface toolkit and use it. The kinds of devices that you will be creating interfaces for in the future are not the devices that exist now, and are not going to use the same widget sets, because users will be interacting with them in new ways.

The language we are going to use to implement projects in the course is Processing (and in particular version 3 of Processing)
, which can be downloaded from here: for windows, OS-X, and Linux.

Processing is a java based language so we are also going to make use of Processing.js to allow it to run in a web browser. Processing.js can be downloaded from here:

Processing has lots of contributed libraries. In general, if you want to use a library that doesn't draw anything on the screen, then its probably OK to use (and properly cited). If the library draws anything on the screen (like ControlP5) then you need to get Andy's explicit permission before using it. However, most of these external libraries do not work with the web-based version at this point, so please do regular testing of your code using processing.js, as the processing.js version is the version you will be turning in.

You will also need a place to host web pages publicly for the course, and make sure anything you put on that page is available to everyone in the class, and that you can run your work from there. Get that website set up early and test your processing.js code on it regularly. One place to start if you don't have one already is ( You can use UIC's vpn ( to mount this directory on your personal computer for ease of moving files around (smb://<yourID> You may want to test initially on a local webserver to save time moving those files around, and if so, python has a nice (and unsecure) one that you can use with: python -m SimpleHTTPServer <port>. You can also use NodeJS to set up a simple local server: npm install http-server  and then:  http-server

Processing should be fairly familiar if you have used any high level language and very familiar if you have used Java.

There are various Processing tutorials at

The "Hello Processing" tutorial is probably too basic, but the "Getting Started" tutorial is pretty good and others on that page should be helpful such as "Coordinate Systems and Shapes", "Color", "Objects", and "Interactivity", "Images and Pixels", "Data"

The 10 minute video on the "Processing 3 Debugger" called 'Debug' is also probably worth looking at to see how the Processing IDE handles that.

The Processing IDE itself and webpages have quite a few examples to load and play with.

Here are some sample files showing a simple interactive program in Processing, and a version that runs on the web via Processing.js, and how to handle sounds in both Processing and Processing.js:

The files are sitting at, including a zip file of the entire directory

We will spending class time getting this and other code running and then using pair programming to make some changes to it, so if you don't have a computer with you, pair up with someone who does and:
- download the processing application from and processing.min.js from to your local machine
- download the file for my small sample app and unzip it
- when you start up processing for the first time you will get a blank sketch
- open the CS422p0.pde file that you downloaded.
- we need to fix some things before you can run the sketch
    - go to Sketch / Import Library Add Library and search for Sound. Then install the Sound Library for Processing
    - by default the file is set up to run on the web using a different audio library so you need to uncomment lines 9, 10, 40, comment out line 14 and 43
- you should be able to hit the play button in the sketch and see the app running. Click on the 3 buttons. You should hear a beep sound and see different imagery on the right side.

- take a look at the cs422p0 folder that you downloaded. Processing likes to have all its data files in the data directory, but the javascript version likes all its files at the main level, so the bing.mp3 and sketch2.gif files are duplicated. The top level also has
processing.min.js and the html file.


The test.html file is pretty short:
<!DOCTYPE html>
     <title>Hello Web - Processing.js Test</title>
     <script src="processing.min.js"></script>
     <canvas data-processing-sources="cs422p0.pde "></canvas>

If you try and look at test.html right now it wont work (for a couple different reasons), and if you look at the error console you will see a few errors.
- go back into the processing IDE and comment out lines 9, 10, 40 and uncomment lines 14 and 43 to fix the audio library issues
- now we need to deal with web server security issues. One way is to move all these files to the webserver in your account and run it from there where it should work. An alternative is to start up a python webserver for that folder on your computer and then point your browser at You can change the port number to make things a bit more secure. Or if you are a Node.js fan you can start up a local web server with it.

At this point you should have run and interacted with the cs422p0 sketch in both the Processing IDE and on the web via

Now we can take a better look at the code itself

setup - done once

draw - done every frame


Note that you can write processing code in an object oriented way if you prefer ( Objects will simplify things as your interface and its code gets more complicated, but you may want to play around with the various capabilities without objects first to get a better idea about what objects can be used for in an interactive graphical application.

The Processing IDE has many built in examples (File / Examples ...), as does the website, and I encourage you to take a look through those to see what you can do, and then as you are sketching out your ideas for Project 1 you can take Processing's capabilities into account.

And then make a few modifications:
     - add two buttons to control a timer. One button starts and stops the timer, and the other resets it to 0. millis() may be a useful function here. and add text / icons to identify the buttons

On Thursday we will take this further in an in-class activity to make sure everyone has a chance to work through the common issues in class, can change the application, can add more media to the application, and make sure it works on the web under Processing.js

In a pair, or at most 3 people ...

last updated 1/25/17