1. Abstraction IS 101Y/CMSC 101 Computational Thinking and Design Tuesday, September 9, 2014 Carolyn Seaman Susan Martin University of Maryland, Baltimore County

2. Big Idea: Abstraction Abstraction is the process of generalizing away from the details of a problem to simplify and focus on its key aspects We use abstraction for problem solving, design, organization, and simplification Examples from everyday life: Smart thermostats Maps Steering wheel Restaurant menu Language!!

3. Abstraction in Computing Abstraction is ubiquitous in all computing disciplines Data is “All Just Bits” but… The interpretation (meaning) of data depends on how it is used The same bit sequence can represent an integer, a decimal number, a sequence of characters, or anything else you might decide it means Programming languages are abstractions of machine language Layers of computing hardware, including gates, chips, and components Programs are abstractions of the problem being solved Functional decomposition == layers of abstraction Models and simulations are abstractions of real-world phenomena We can study, analyze, and experiment with models more easily than experimenting on the real world

4. Programming Programs are written to execute algorithms Requires an understanding of how instructions are processed Programs are executed to automate processes A single program can be run multiple times, on many machines Executable programs increase the scale of solvable problems Programming is facilitated by appropriate abstractions Functions are re-usable programming abstractions Parameterization can be used to generalize a specific solution Data abstraction can separate behavior from implementation APIs and libraries simplify complex programming tasks Programs are developed and used by people Developing programs is an iterative process Finding and eliminating errors is part of the process Documentation is needed for maintainable programs

5. Big Idea: Design Problem solving often produces multiple possible solutions Or multiple ways to implement the solution Design is the process of making those decisions and choices Design at a high level Is it cost-effective to automate kidney exchange? Should we use a relational or object-oriented database? Design at a low level How do I structure this function? What do I call this variable?

6. Design Process for Programs First, understand the problem clearly Second, write the solution in English Test its correctness by manually applying it to some simple – and then more complex -- examples Optionally, “translate” the solution into pseudocode Advanced programmers will use this step as an abstraction to avoid the syntactic details of a particular programming language Next, translate the solution into a programming language Finally, implement (type) and test (carefully!) your solution

7. Example: Counting Print the numbers from one to N N is a variable that can change each time the program is called For example, “printNumbers (7)” should print: 1 2 3 4 5 6 7

8. Counting in English: Attempt #1 First attempt at English: Count from one to N Print out each number Not really an algorithm – just a restatement (what is the primitive action “count”??)

9. Counting in English: Attempt #2 Next attempt: Set the variable “current” to 1 Print the value of “current” Add one to “current” If “current” is greater than N, stop Otherwise, go back to “print” step Turns out that “go to” statements are bad design (for reasons we’ll talk about later) Let’s try it again, using something that looks more like a loop with a condition

10. Counting in English: Attempt #3 (almost right!) Set the variable “current” to 1 While “current” is less than N: Print the value of “current” Add one to “current” Test by hand: what if N = 3? Boundary cases: what if N = 0? N = -4? Possible error cases: what if N = 8.73? what if N = “this isn’t a number”?

11. Counting in English: Processing Version void printNumber (int N) { int current = 1; while (current <= N) { println (current); current = current + 1; }

12. Exercise: Multiplication Work in your team – OK to split into smaller groups of 2 or 3 when you’re at the implementation step How would you multiply two numbers, using only the addition operator? Understand the problem – state some examples Write the solution in English Test the English solution! Write the solution in pseudocode Test the program on paper Concepts: iterations, efficiency

13. Break Announcements Visitor on Thursday I’m away next week Reminders?

14. Processing Language for programming graphical and interactive computations

15. Processing Demonstration “My Crazy Squares” by Marcella Todaro http://www.openprocessing.org/sketch/49183 CrazySquares.pde

16. Processing: Program Basics setup: initialize the display void setup() { size (500, 500); } draw: invoked each time step to update the display. Example: void draw() { if (mousePressed) { background(0); } else { background(255); } } A ; character is needed after every statement in Processing size() is a function that changes the size of the display window. size(w,h) sets the display to be w pixels wide and h pixels high. background() changes the color of the display background. 0 is black; 255 is white; numbers in between are shades of gray. If you give three values to background(), it uses them as RGB (red/green/blue) color components.

17. Processing: Defining Variables A variable stores a piece of information (i.e., a value) Variable types: int (integer) float (real-valued) boolean (“true” or “false”) char (character, such as ‘x’ or ‘+’) Variable definition: [= ] Examples: int brightness = 0; float xPosition; boolean makeBrighter; Variable definitions should always go at the top of your program or at the beginning of a function Variables should have meaningful names. We’ll generally use “camel case” as shown here to separate words in a variable name.

18. Processing: Manipulating Variables Changing the value of a variable: = must be an expression that evaluates to a value of the correct type Examples: brightness = 255; brightness = brightness + 1; brightness++; xPosition = xPosition – 3.0; makeBrighter = ! makeBrighter; Note: White space (spaces, tabs, carriage returns) are ignored by Processing – white space is primarily used to make code more readable The “!” operator means “not” – it changes “true” to “false” and “false” to “true”. Other boolean operators include && (and) and || (or) These do the same thing! What do you think “brightness--” does?

19. Processing: Drawing Pictures Lines: line(x1, y1, x2, y2); Basic shapes: rect(x, y, width, height); // x,y = upper left ellipse (x, y, width, height); triangle(x1, y1, x2, y2, x3 y3); General polygon: beginShape(); vertex(x,y);...; endShape(); Line attributes: strokeWeight(thickness); fill(grayscale) OR fill(R, G, B); All locations on the screen are specified by two values: x (distance from left edge) and y (distance from top edge). The upper left corner is (0, 0).

20. Processing: Conditionals { } { } else { } Example: if ( makeBrighter ) { brightness--; } else { brightness++; }

21. Processing: for Loops for ( ; ; ) { } Performs the initialization step Tests - if false, STOPS! Else... Performs Goes back to “Tests” step Example: int i; for ( i=0 ; i<3 ; i++ ) { rect (100*i, 50, 50, 50); }