Skip this Video
Download Presentation
Today’s Class

Loading in 2 Seconds...

play fullscreen
1 / 15

Today’s Class - PowerPoint PPT Presentation

  • Uploaded on

Data: Programming Design and Modularization IS 101Y/CMSC 101 Computational Thinking and Design Thursday, September 26, 2013 Carolyn Seaman University of Maryland, Baltimore County. Today’s Class. Processing concepts: Review: Functions Images: PImage type, loadImage (), image()

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about ' Today’s Class' - omana

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

Data: Programming Design and ModularizationIS 101Y/CMSC 101Computational Thinking and DesignThursday, September 26, 2013Carolyn SeamanUniversity of Maryland, Baltimore County

today s class
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(), ...
      • Arrays: collections (lists) of objects
  • Designing, Testing and Debugging
    • Demonstrated through a live coding session...
what does that mean
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)
  • 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
Creating a Function

<type> <function name> ( <parameters> ) {




  • <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
Calling a Function

<function name> ( <parameter values>) ;


<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


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;


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.


Since the function does not have a type (void), there is no return statement

  • Creating the function printInstructions:

void printInstructions (int iterations) {


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
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
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
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
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
  • 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
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;inti; ... 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
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