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: https://processing.org for windows, OS-X,
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: http://processingjs.org
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 people.uic.edu (http://people.uic.edu). You can use
UIC's vpn (http://accc.uic.edu/service/vpn) to mount this
directory on your personal computer for ease of moving files
around (smb://<yourID>.people.uic.edu/). 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",
The 10 minute video on the "Processing 3 Debugger" called 'Debug'
is also probably worth looking at to see how the Processing IDE
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 ajohnson.people.uic.edu/cs422p0,
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
- download the processing application from https://processing.org
and processing.min.js from http://processingjs.org
to your local machine
- download the cs422p0.zip file for my small sample app ajohnson.people.uic.edu/cs422p0
and unzip it
- when you start up processing for the first time you will get a
- 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
- 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
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:
<title>Hello Web - Processing.js
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 people.uic.edu 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
http://0.0.0.0:8000/test.html. 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 Processing.js.
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 (https://processing.org/tutorials/objects/).
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
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 ...
the timer code you wrote in Tuesday’s class, or finish up that
- Use the
timer to cycle through 10 images, one image every 2 seconds.
You can pick the images: emoji’s, photos of friends, whatever,
as long as they are family friendly, and be sure to cite where
you got them from in text on the canvas of the app
- Use the buttons to
control pausing and resetting the cycling images
- Add the names of the
people in your group to the canvas in different readable fonts
- If you
have extra time - replace the current sound with something
your code on a public webpage where we can see it working and
send the location to shi by the end of class
last updated 1/25/17