150 likes | 247 Views
Data: Programming Design and Modularization IS 101Y/CMSC 101 Computational Thinking and Design Thursday, September 26, 2013 Marie desJardins University of Maryland, Baltimore County. Today’s Class. Processing concepts: Review: Functions Images: PImage type, loadImage (), image()
E N D
Data: Programming Design and ModularizationIS 101Y/CMSC 101Computational Thinking and DesignThursday, September 26, 2013Marie desJardinsUniversity of Maryland, Baltimore County
Today’s Class • Processing concepts: • Review: • Functions • Images: PImage type, loadImage(), image() • Keyboard input: keyPressed(), key • Mouse location: mouseX, mouseY • New: • Clock time and program time: millis(), ...Top-down design • Arrays: collections (lists) of objects • Testing and debugging • Demonstrated through a live coding session...
What Does That Mean?? • “It looks like you’re mixing “active” and “static” modes.” • “static” mode is when your Processing program is just a list of instructions – those instructions are run once and then the program ends • “active” mode is when you define the setup() and/or draw() functions and the program runs continuously looking for input • If you have any functions defined, you can’t have commands outside those functions – you need to use setup() and draw() • If you want anything to happen after setup() runs (e.g., when a key is pressed), you must have a draw() function (even if it’s empty)
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? • ……
Creating a Function <type> <function name> ( <parameters> ) { <body> } Where: • <type> is the type of data that the function returns as an answer • <type> 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) • <function name> is a name you choose to describe what the function does • <parameters> 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. <type> <name> • <body> 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)
Calling a Function <function name> ( <parameter values>) ; Where <function name> is the name the function was given when it was created <parameter values> is a list of values for each parameter, in the order that the parameters were listed when the function was created
Example Since the function has a type (not void), there has to be at least one return statement • Creating the function product: float computePower (float x, int a) { float answer = 1; inti; 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); Parameter values have to be of the same types, in the same order, as the parameters in the function definition.
Example Since the function does not have a type (void), there is no return statement • Creating the function printInstructions: void printInstructions (int iterations) { inti; println (“Stir the batter once.”); for (i = 2; i <= iterations; i++) { println (“Now stir it again.”); } } • Calling the function printInstructions: printInstructions (5); 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.
Handling Images in Processing • Images: • PImage– a special data type for variables that hold “raster images” (basically a pixel array) • PImageloadImage (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:PImageimageVariable; ...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”)
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”); } }
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);}
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
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 plant a garden of 25 plants and then be able to interact with them – change the type, water them, fertilize them, etc. • We probably wouldn’t want 25 different variables, one for each plant! • Especially since we might end up wanting 100 plants instead... • Arrays are used to create lists or sets of similar type variables that can be individually accessed and manipulated
Defining and Using Arrays • If we want a list of numPlants plants, 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:intnumPlants = 5;int ; ... float[] plantX = new float[numPlants]; float[] plantY = new float[numPlants]; ... for ( i=0 ; i<numPlants ; i++ ) {plantX[i] = 100 + 100*i;plantX[i] = 100 + 50*i; } • Where will the plants be planted (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!) “new TYPE[LENGTH]” creates an empty array with space for LENGTH objects of type TYPE The plants are “indexed” from 0 to numPlants-1
Live Design & Coding • CrashBasics.pde • Functionality: • A frog appears anywhere the user types an “f” • After a fixed period of time, the frog disappears • Top-down design • Implementation and debugging