CS 210 Intro

I object!

Assigned Tuesday, January 21

Lab summary

This lab allows you to explore the basic graphics package we will be using at the start of this course, as well as some of the simplest forms of object-oriented programming. The main thing I would like you to focus on is how working in Java is very different than in imperative languages like C.

Background

In object-oriented programming, some of the most basic types of instructions we can give to the computer are to create sets of objects that accomplish various purposes. Somebody else has already done the job of defining how these objects work, and what they do (you will be learning that soon!). For now, we are just going to tell the computer to create some individual objects that we can use to form a picture.

The objects themselves have already been defined in a graphics package called "objectdraw". You will first run a simple program that allows you to create graphical objects and change them in various ways. Then you will use a Java system to write instructions for the computer to build the same picture.

The activities you will engage in

Locate and run the "NotPhotoshop" program

  1. Use the instructions you have been given to access the CS210 Folder
  2. Open the Course Materials folder.
  3. Locate the file NotPhotoshop.jar
  4. Drag NotPhotoshop.jar onto your desktop, so you can have a local copy of the program
  5. Double-click on the copy you made, start the program
  6. This should pop up a window with a a number of items in it, including two rows of buttons at the bottom, and a drawing area in the upper right

Explore the program

  1. You can use the buttons in this program to send instructions to the computer to create and manipulate various kinds of objects
  2. The program window offers the following five different areas:
    1. The drawing window is the large rectangle appearing on the upper portion of the right side of the window. When you create objects, they will appear here.
    2. The mouse tracker consists of the x and y coordinates below the drawing window. These tell you where the computer thinks the mouse is, when it is inside the drawing window. Move the mouse around to see how these values change.
    3. The object constructor is the shaded area just below the mouse tracker. This area contains entries for you to fill in information describing the kinds of objects you want to create. The entries are set up to show you what kinds of commands you would have to write in Java in order to accomplish in a Java program the kinds of things you are going to do by hand here.
    4. The method invocation buttons allow you to send messages to objects you have already created, in order to modify them or obtain information from them. You can send a message to an object by clicking on it in the drawing window and then clicking the button for the message you want to send.
    5. The output area will print information that you get back if you send a message to an object that requests some kind of information. This area will also display error messages if you try to do something the program doesn't like when creating an object or sending a message to one.
  3. Learn about the coordinate system that Java expects you to use:
    1. Try moving the mouse to the exact position x:30 y:50
    2. Find out where the position x:0 y:0 is in the drawing window
    3. If you move the mouse right, what happens to the x and y values?
    4. If you move the mouse down, what happens to the x and y values?
    5. What are the x and y coordinates of the four corners of the drawing window?

Create your first objects

There are six different types of objects provided by the objectdraw package: FramedRect, FilledRect, FramedOval, FilledOval, Line, Text. They each require different types of information when they are created, and they can each be sent different types of messages.
  1. Create a FramedRect object
    1. Make sure that FramedRect is selected in the new box in the object constructor area.
    2. Fill in blanks to tell the system you want a rectangle that has a width of 100, has a height of 100, and is located 70 pixels from the top of the drawing area, and roughly half way between the left and right edges of the drawing area.
    3. After you have filled in the values you want, click on Construct to create the object (it should appear on the drawing window).
  2. There are two ways to make an object disappear
    1. Tell the object to "hide" itself (the object is still there, it is just "invisible"...tell the object to "show" itself again)
    2. Wipe the object's existence from the computer's memory (you can't do that with this program, but you can do it when you start writing Java programs)
  3. Create a FilledOval object
    1. Make sure you tell the program that the type of object you want to construct is a FilledOval
    2. Fill in blanks to create an oval that is really a circle (the width and height are the same) of radius 60, roughly in the center of the drawing window
    3. Click the Construct button to create the object
    4. Notice you can select either the FilledOval or the FramedRect in the drawing window by clicking on either one. You have to select an object in order to send it messages.
    5. Move the FilledOval 100 pixels to the left, by clicking on the move(...) button, entering an appropriate x and y offset, and then clicking OK
    6. Figure out on your own how to change the FilledOval's color to orange.
    7. Find out what the FilledOval's new location is by sending the getLocation() message. Look for the result in the output area.

Draw a picture

Quit the NotPhotoshop program and start it again, so you can start with a clean slate. Now use your skills and ingenuity (and help, if you would like some) to draw the following picture:

When you are done, send messages to the various objects to determine their exact positions and sizes. We do not care what the exact values are, as long as the picture looks about right. Write this information down, because you will need it for the next part of the lab.

Start the Java environment

In this part, you will draw your "No clicking" sign by giving Java instructions to the computer, rather than clicking buttons. First you must start up the "Java compiler"; the computer program that understands instructions in the Java language.
  1. Locate the DrJava program in the Course Materials folder. Drag it to the desktop to make a local copy.
  2. Click the DrJava icon. This should pop up a window that represents that Java compiling program
  3. For now, we are only going to pay attention to the area at the bottom that is titled "Interactions". This area should have a "Welcome to DrJava" message in it
  4. In this "Interactions" area, you can type Java commands and watch them execute. Before you can start creating objects, though, you have to type in a couple of special commands.
    1. First you must click your mouse in the interactions area, so it will accept things that you type
    2. Then type in: 
         import objectdraw.*;
      (then press Enter). This allows the Java program to have access to the special graphics library we are using to draw pictures.
    3. Next type in: 
         canvas = new FrameCanvas();
      (then press Enter). This should cause a drawing window to appear on your screen. This is just like the drawing portion of the NotPhotoshop program. You will learn more later about what you just did.
  5. At this point, you should be able to start drawing pictures by typing in Java commands
    1. You can use the constructor are of NotPhotoshop to give you clues about how you have to type the commands. Remember that computers are picky when you program them...if you make a typographical error, the computer will not do what you want.
    2. As an example, if you want to create a FramedRect at x=100, y=75, with width=50 and height=80, you could type in the command: 
         new FramedRect(100,75,50,80,canvas);
    3. Use this example to figure out which Java instructions you need to type to create your "no clicking" sign
      • Notice that we have not yet told you how to set the colors of the objects in Java. You will learn that next week. For now, just draw all the objects in black, and do not worry about the colors.
    4. Once you have figured out which commands you need to create the sign, and you have successfully drawn the sign in the window, write the commands down. You will use these for our first real lab tomorrow.
    5. Get my attention and show me what you have created.

What you would hand in if this were to be a graded lab.

  1. A written sheet of the Java instructions you came up with for drawing the "no clicking" sign
  2. A short (1 or 2 pages) writeup describing what you learned from this project, any problems you ran into, and how you overcame them.
  3. You do not need to turn in anything electronic for this assignment

Grading (again, standards that would be used if this were graded)