1. Introduction to Processing CS 4390/5390 Fall 2014 Shirley Moore, Instructor September 3, 2014 1

2. Visualization Critique Discuss your critique of a visualization from the Hans Rosling video in small groups. Elect a group member to share a summary of your discussion with the class. 2

3. Processing Open source software available athttp://processing.org/http://processing.org/ Design and prototyping tool for graphics and complex data visualization Library and program development environment (PDE) – Library can be used with a Java development environment without the Processing PDE Many third-party libraries available Information about all Processing functions available in Processing Reference (online and part of Help, can also right-click any function name) Example programs included with the Processing PDE 3

4. Sketching with Processing A Processing program is called a sketch. – A sketch comprises one or more tabs, each containing code. Sketches are stored in a sketchbook folder. The sketch last used will open by default. File  Open … can be used to open a sketch from elsewhere. 4

5. Let’s Get Started! Draw a line: Enter the code below and press the Run button (looks like the Play button on an audio or video device). size(400, 400); background(192, 64, 0); stroke(255); line(15, 25, 70, 90); The above is a basic mode sketch (no animation or interaction). 5

6. Continuous mode sketch Created by using functions setup() and draw() Draws a series of frames Example: void setup() { size(400, 400) stroke(255); background(192, 64, 0); } void draw() { line(150, 25, mouseX, mouseY); } How can you change the sketch so that it draws just a single line that follows the mouse? Called once Called repeatedly (default: 60 times/sec) Called repeatedly (default: 60 times/sec) 6

7. mousePressed() function Called whenever the mouse is pressed Example void setup() { size(400, 400); stroke(255); } void draw() { line(150, 25, mouseX, mouseY); } void mousePressed() { background(192, 64, 0); } 7

8. More about size() Can only be called once Cannot be used to resize window Sets width and height variables for the window Select renderer with optional third argument – P2D – P3D – PDF Set window to maximum display size with size(displayWidth, displayHeight); 8

9. Class Exercise 1 1.Draw a white circle with diameter 100 pixels in the center of a red window the size of the display. 2.Modify your sketch so that the circle changes color when you press the mouse. 9

10. Exporting to an Application You can create an application for MacOS, Linux, or Windows by using File  Export Application 10

11. The Data Folder loadImage() and loadStrings() functions use the data folder that is a subdirectory inside the sketch folder. When you export an application, the data folder gets bundled with it. Use Sketch  Add File to add a file to the data folder. 11

12. Let’s Draw a Map Start a new sketch. Download http://benfry.com/writing/map/map.png and add the file to the sketch. http://benfry.com/writing/map/map.png Try the following code: PImage mapImage; void setup() { size(640, 400); mapImage = loadImage("map.png"); } void draw() { background(255); image(mapImage,0,0); } 12

13. Class Exercise 2: Location Data for the Map Now let’s draw a red circle in the center of each state, with the size of the circle representing the state’s population. Download the following two files and add them to the sketch: – http://benfry.com/writing/map/locations.tsv http://benfry.com/writing/map/locations.tsv – http://benfry.com/writing/map/Table.pde http://benfry.com/writing/map/Table.pde – The second file contains code to read the data in the first file into a table. Find population data on the Web and add the data to the sketch. Draw the required circles on the map. Add rollovers to show the state name and population when the mouse hovers over it. 13

14. Lab 1: Election Data Use Processing to visualize data for the states from the 2012 US Presidential Election. Your visualization should answer the questions of which states went “red” (Republican), which went “blue” (Democratic), and how strongly red or blue each went. Your visualization should also compare the number of electoral votes apportioned to the states. Add rollovers to show the state name and percentage it went red or blue when the mouse hovers over it. Due Monday, September 15, at beginning of class 14

15. Preparation for Next Class Finish Class Exercise 2 Read Ware Chapters 1 and 2 Start on Lab 1 15