Task 1: [20 minutes] Computer Graphics
In this first part of the exercise, you will learn about two topics: graphics and libraries. When we talk about graphics, we’re talking about programs that present their output in the form of pictures rather than in textual form. Modern computer games, computational photography, and scientific data visualization, as well as many other applications output data in graphical form. When we talk about libraries in computer science, we’re talking about collections of programs that your programs can use, so that you don’t have to write the code yourselves. In this exercise, you will use someone else’s code to actually display graphical output. The way that you’ll use their code is by calling procedures that their code implements. So, let’s get started.
A. [5 minutes] Get the library. Create a new project called Triangle in Eclipse. Add a new file (use File>New>File) called StdDraw.java (you’ll enter this as the name of the file when you create it). This is the file that will contain the Java code for generating graphical output. Now rather than writing that code yourselves (which you’re not quite ready to do) go get it from here: http://www.cs.princeton.edu/introcs/15inout/StdDraw.java.html. Just copy the contents of this file into your StdDraw.java file. Don’t worry about the details of this code.
B. [10 minutes] Create a program that uses the library. Libraries are great. Not only don’t you have to write the code. You don’t even have to understand it.All you have to understand are the procedures that the library provides for your use. One of the most important of all concepts in computer science (and in many other disciplines) is thus embodied in the library: the concept we call abstraction. Abstraction is the ability to ignore inessential details to focus on the essence. With libraries, the code is a detail you can ignore. What matters are the procedures that the code implements. For example, StdDraw provides procedures for doing such things as drawing lines, points, circles and images. The set of procedures that a library implements is often called an application programming interface (or just API). The principle of abstraction allows you to use a library knowing only its API, without having to understand the code that implements the API. Abstraction is the key to the intellectual control of complex software systems.
Let’s see how it works. Here’s a simple program that uses the StdDraw library. Add a second file to your project. Triangle.java (you can do this with File>New>File or File>New>Class – in fact there are several ways to accomplish this simple task; just pick one). Here’s the code to type in to Triangle.java. Do not run your program yet! Don’t run it until instructed to do so.
public class Triangle {
public static void main(String[] args) {
double t = Math.sqrt(3.0) / 2.0;
StdDraw.line(0.0, 0.0, 1.0, 0.0);
StdDraw.line(1.0, 0.0, 0.5, t);
StdDraw.line(0.5, t, 0.0, 0.0);
StdDraw.point(0.5, t/3.0);
}
}
C. [5 minutes] A note on specifications. What you see in this program are several uses of several libraries. The first library used is Math. The second library used is StdDraw. Now to find out what a library procedure does and how it’s used (or called or invoked), using Eclipse you can hover your mouse pointer over the name of the procedure. So, for example, to find out what the line procedure of the StdDraw library does, just hover your pointer over the procedure name, line. (The text that Eclipse displays here is present as a specially formatted comment in StdDraw.java.) This sort of description of what a procedure does is called its specification. The code that implements the procedure to satisfy the specification is called the implementation. The principle of abstraction says that to use a library we need only know its specifications not its implementations. Congratulations! You have now learned about libraries, abstraction, and the difference between specifications and implementations.
D. [5 minutes] Reason about your program then run your program to test your hypothesis. Next, read the specifications of the procedures again, then read your Triangle program from beginning to end, and see if you can figure out what it does. What you’re doing is one of the most common and important tasks in programming: to develop a hypothesis about what a program does and how it does it. Do this before you run your program. Now, in order to test your hypothesis, run your Triangle program. Were you right? If not, figure out why. Congratulations! You have reasoned about a program, run it to test your ideas, and by the way, you have also written your first computer graphics program. Include your name and the names of any collaborators in a comment at the top of your file and submit your Triangle.java file.
Task 2: [20 minutes] Program Understanding Using a Debugger
Eclipse provides rich support from program debugging. That is, it provides a debugger tool. A debugger is useful for several tasks. First, you can use a debugger to see what a program does as it executes line-of-code by line-of-code. That is, you can use it to help you understand what a program is doing. That’s what we’ll do today. Second, you can use a debugger to help you to test hypotheses about the causes of errors in programs that compile and run but that produce incorrect results. We’ll learn about using a debugger in this way – for debugging (thus the name) – later in the semester.
To start off with, set a breakpoint on the first line of code in the implementation of the Triangle program: the line that says public static void main(String[] args). To set a breakpoint, double-click on the grey panel that is to the left of your program code or right click and then select Toggle Breakpoint. The addition of the breakpoint will be indicated in several ways. First, a blue dot appears where you clicked. Second, the breakpoint will be added to the breakpoints panel, which you don’t see yet but which will appear on your screen after the next step.
Now go to the “Run” menu and select the “Debug” option; or, equivalently, click on the bug-shaped icon next to the run icon on the displayed toolbar. You may get a message about changing your perspective to the Debug mode. Select yes to this question. (An Eclipse perspective is a set of panels useful for a particular task, in this case debugging.) Eclipse will start the Triangle program, and you will notice that many of your windows have changed. Eclipse has switched you to the Debug perspective. To switch between the Java programming and Debugging perspectives, click on either the “Debug” picture or the “Java” picture on the top-right corner of your screen. For now you should be in the Debug perspective.
In this debugging mode, you can step through your program line by line and see what happens at each step. To begin with, you will need to learn how to use three important tools: Step Into, Step Over, and Step Return. All three of these command can be found under the Run menu. They are also available as toolbar icons in the Debug toolbar, or as function keys. “Real” computer scientists learn to use the function keys.
- Step Over: This command executes one statement and returns control to the user at the end of the statement; and when the statement being executed is a procedure call, e.g., a call to StdDraw.line(), Step Over executes the whole procedure in one step without displaying the internal details of that procedure’s execution. It stops at the next statement after the procedure call. In this sense, it steps over (or hides and lets you ignore the details of) the procedure’s execution. Step over does not bypass the procedure: it actually does run; but simply does not display the details. Step Over thus implements another form of abstraction.
- Step Into: This command behaves just like step over – in the sense that it inside either a function call, or a conditional statement, or a loop statement.
- Step Return: This command executes all the necessary commands needed to complete the current function call. It is often used in combination with the “Step Into” command.
First trace through the execution of the Triangle program by running “Step Over” for all statements in the program. As you step through your program, take very careful notice of how declared variables and their values appear in the top-right window of Eclipse. To be able to see what’s happening as your program runs is extremely valuable. You cannot do well in CS101 without becoming very proficient with the debugger. It’s really essential as an aid to program understanding. When your program terminates, Eclipse leaves you in a state in which you can debug the program again.
Start up the debugger again. This time, , use the “Step Into” command to step into the first instance of the StdDraw.line procedure. What you’ll see is the execution of the code that implements the line procedure. To get out of this method, keep single stepping (using step over) until the procedure is done. Then once again Step Into the second invocation of the line procedure. This time, use the “Step Return” command to tell the debugger to keep proceed without your intervention until control returns to the Triangle program.
Play around with the three debugging commands until you are comfortable with them. The Eclipse window in the top-right corner of your screen (it says “Debug”) will tell you what line in your code you are currently executing. Look for the words “Thread [main]”. After you leave lab, and from now on when you’re writing programs, get in the habit of using the debugger to help you understand what your program is really doing.
Task 3 [20 minutes] For Loops and Statement Blocks
A. On your own, without help from your fellow students, write a new Java program called Loops.java. The program should have a single for loop, with an index variable j thatruns from 0 to 9. On each iteration of the loop, output the value of the variable j followed by a single space. Set a breakpoint at the start of your program and run the whole program in the debugger. As your program runs, watch carefully both the pane that shows the variables and their values as well as the console output pane at the bottom of your screen. Wait for your TA to discuss this program before moving to the next step.
B. Continuing on your own, modify the program that you just wrote in the following way. Enclose the loop that you just wrote so that it becomes the body of an outer for loop. The outer loop should have an index variable i that again runs from 0 to 9. Before you run this new program, figure out exactly what it’s going to do. Run the program to test your ideas. If you were right, great. If you were wrong, figure out why and do not procedure until you understand what’s happening. ASK THE TA A QUESTION if you don’t understand.
C. Add a println(); statement in the right place (figure this out) so that the program prints ten separate lines of output, each containing the numbers from 0 to 9 separated by spaces. One of the challenges here is to make sure that you put curly braces in the right places! Be sure you understand where they go and why they go there. Run you program as a way to test the hypothesis that it will behave as you intend and expect.
D. Now change the line of code that prints the value of j so that it instead prints the value of i*10+j. Before you run your program, figure out what it’s going to do. It’s extremely important that you be able to figure this one out. If you can’t then we guarantee that you will have problems in the remainder of this course. Take this opportunity to make sure you know what’s going on. Next, run your program to test your idea. If you were wrong, figure out why. Finally, run your program in the debugger, watching very carefully three things: (1) exactly which lines of code are being executed an in what order, (2) how the values of the index variables are changing, and (3) the output that’s being produced.
E. Finally, modify your program as follows, then (without running it) reason about what it is going to do, then run it to test your understanding. The change you will make is to output not the value of i*10+j but the value of (i*10+j)%2. What do you expect to see? Once you’ve done this, change the 2 to 3. What do you expect to see. Go ahead and see if you were right. Submit your Loops.java program.
Task 4 [15 minutes]: Discuss
The discussion section will have two important themes:
- statements vs. blocks, and
- variable scope.
You may follow along, we will be using the following example to facilitate discussion: https://www.cs.virginia.edu/~ms6ep/cs101/lab02/Discussion.java.
Time permitting, we will also answer any questions you had on the work you just did.