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, 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: 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 https://processing.org/tutorials/

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 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 and:
- 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 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.

bing.mp3
cs422p0.pde
Data
    bing.mp3
    sketch2.gif
processing.min.js
sketch2.gif
test.html

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

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

functions

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

Take the timer code you wrote in Tuesday’s class, or finish up that code
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 itself
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 appropriate
Put 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