1. Data: Programming Design and Modularization IS 101Y/CMSC 101 Computational Thinking and Design Thursday, September 25, 2014 Carolyn Seaman Susan Martin University of Maryland, Baltimore County

2. Announcements Quizzes from now on will be on paper! Next Tuesday (9/30) Dr. Janeja will guest lecture on Big Data THERE IS ASSIGNED READING!!!! PA2 and late policy 15% off for every day (or part of) late

3. Focus Groups Tomorrow, our first focus group will take place at 11:30am. If you got an invitation, please let Anisha know if you can come ASAP (if you haven’t already) If you cannot be there by 11:30, you cannot participate this time There will be two more opportunities later in the semester We’re trying to figure out the best time to schedule future focus groups If you are NOT participating in tomorrow’s focus group, which of the following options is best for you (choose just one): 11:30am-1pm on a Friday (before class) 2-3:30pm on a Friday (after class) Either is fine

4. Today’s Concepts Processing concepts Functions Images Keyboard and mouse input Timing Arrays Live coding – watch Dr. Seaman code in real time! Getting a start on Processing Assignment #3

5. Functions Why do you need functions? Abstraction – focus on details once, then forget about them Repetition – do the same thing multiple times Clarity – give a set of complex commands a meaningful name Modularity – building a program out of coherent pieces rather than one big mess What is a function? A function is a set of commands, bundled together with a name, some parameters, and a return value, designed to complete one task Sometimes called a procedure if it doesn’t have a return value In some languages, called a method How do you use functions? ……

6. Creating a Function ( ) { } Where: is the type of data that the function returns as an answer is often void which means that the function does not return any value as an answer (this kind of function is sometimes called a procedure) is a name you choose to describe what the function does is a list of pieces of data that the function needs to do its job, i.e. its input; each parameter has a type and a name, i.e. is a list of commands and control statements that carry out the task the function is supposed to perform; must include a return statement if the function returns a value (i.e. if it’s not void )

7. Calling a Function ( ) ; Where is the name the function was given when it was created is a list of values for each parameter, in the order that the parameters were listed when the function was created

8. Example Creating the function computePower : float computePower (float x, int a) { float answer = 1; int i; for (i = 1; i <= a; i++) { answer = answer * x; } return (answer); } Calling the function compute_power : float radius = 5.5; float area = 3.14 * computePower (radius, 2); Since the function has a type (not void ), there has to be at least one return statement Parameter values have to be of the same types, in the same order, as the parameters in the function definition.

9. Example Creating the function printInstructions : void printInstructions (int iterations) { int i; println (“Stir the batter once.”); for (i = 2; i <= iterations; i++) { println (“Now stir it again.”); } Calling the function printInstructions : printInstructions (5); Since the function does not have a type ( void ), there is no return statement Parameter values have to be of the same types, in the same order, as the parameters in the function definition. Parameter values can be variables, constants, or expressions. Calling a function that doesn’t have a return value constitutes a program statement all by itself; doesn’t have to be embedded in an expression.

10. Handling Images in Processing Images: PImage – a special data type for variables that hold “raster images” (basically a pixel array) PImage loadImage (FILENAME) – a built-in function that you can call to load an image from a file (whose name is given as a string input). Returns an object of type PImage, so you would call it this way: PImage imageVariable;... imageVariable = loadImage (“mypicture.png”); void image (IMAGE, X, Y) – a built-in function that draws the PImage named IMAGE at location [X,Y] void image (IMAGE, X, Y, WIDTH, HEIGHT) – if given five arguments, the last two specify the desired width and height of the drawn image (otherwise the image is drawn “actual size”)

11. Keyboard Input void keyPressed() – function that is automatically called whenever a key is pressed while a Processing program is running To handle keyboard input, you would add this function to your Processing program At any time, you can refer to the special variable key (of type “char”) to see what key was pressed Example (which should look familiar...): void keyPressed() { if (key == ‘s’) { save (“garden.png”); } }

12. Mouse Location At any time while a Processing program is running, the special variables mouseX and mouseY will hold the X and Y coordinates of the mouse pointer’s location Example (what will it do?!): void keyPressed() { text (key, mouseX, mouseY); }

13. Timing Your Programs Processing has two concepts of time: clock time and program time Clock time is the real-world time year() – current year, an integer (e.g., 2013) month() – current month, from 1 to 12 day() – current day of the month, from 1 to 31 hour() – hour of the day, from 0 (midnight) to 23 (11pm) minute() – minute of the hour, from 0 to 59 second() – second of the minute, from 0 to 59 Program time is how long the program has been running millis() – the number of milliseconds elapsed since the program started

14. Arrays As discussed in St. Amant Chapter 4, we often need to store much more information than we could capture in a bunch of variables Suppose we wanted to draw a row of 5 squares and then be able to interact with them – change the color, resize them, delete them, etc. We probably wouldn’t want 5 different variables, one for each square! Especially since we might end up wanting 100 squares instead... Arrays are used to create lists or sets of similar type variables that can be individually accessed and manipulated

15. Defining and Using Arrays If we want a list of numSquares squares, each with an X and Y location, we can define two arrays, one to hold the X values and one to hold the Y values: int numSquares = 5; int i;... float[] squareX = new float[numSquares]; float[] squareY = new float[numSquares];... for ( i=0 ; i<numSquares ; i++ ) { squareX[i] = 100 + 100*i; squareX[i] = 100 + 50*i; } Where will the squares be drawn (that is, what are the X and Y locations? – note that nothing has actually been drawn by the code... we have to DO something with the X and Y values for anything to happen!) The plants are “indexed” from 0 to numPlants-1 “new TYPE[LENGTH]” creates an empty array with space for LENGTH objects of type TYPE

16. Live Design & Coding CrashBasics.pde Functionality: A frog appears anywhere the user clicks If the user clicks again, the frog moves to the new position Top-down design Implementation and debugging

17. And then… Modification #1: user can type an ‘e’, ‘f’, or ‘s’ makes an elephant, frog, or seal appear at the position of the mouse only one animal appears at a time Modification #2: animals don’t disappear – they multiply! Modification #3: animals move randomly and bounce off the walls