CS 161 Homework 1 - Working with Shapes

Due Wed Sep 11 at 11:59pm

Overview

In this assignment you will use the BlueJ interactive development environment (IDE) to practice instantiating and calling methods on Shape objects. You will manipulate these shapes to create a simple picture of a robot. You will also begin writing your own Java source code!

This assignment should be completed individually (not in pairs). If you get stuck you are welcome to ask me for help. You can also ask questions of your classmates, but remember the Gilligan's Island rule!

Objectives

To become familiar with the BlueJ IDE
To become familiar manipulating objects
To practice writing source code
To practice the procedure for submitting your work

Necessary Files

You will need to download and install the BlueJ IDE; follow the "Installation Instructions" link if you need help. Note that if you are working in the computer lab (TH409), BlueJ is already installed!

You will also need to download a copy of the Homework1.zip file which contains the DrawableShapes project.

Details

Below are detailed instructions for completing the homework. For this early assignment, I'll walk you through most of the steps. There are a lot of details; be sure and read the instructions carefully, and let me know if anything is unclear!

Starting with BlueJ

After you've installed BlueJ, download a copy of the DrawableShapes project from the link above. You will need to save the .zip file to your computer: I recommend you create a dedicated folder for storing your programming and class work.

The actual DrawableShapes project is inside this compressed folder, and you need to extract it before BlueJ can open the project. You should be able to double-click it to get at its contents. On a Windows machine, you'll see the DrawableShapes project folder inside the compressed file; simply drag the DrawableShapes folder out onto your desktop. Alternatively, you can right-click on the compressed file and select "Extract All", which should create a non-compressed folder in the same directory. On a Mac, double-clicking the file should extract the project folder in the same directory as the compressed file. If you have any problems with this process let me know!
You can open this project by either double-clicking on the "package.bluej" file inside the project folder, or by selecting "Project" > "Open Project..." in BlueJ and navigating to the "DrawableShapes" project in the file-selection dialog. (Protip! On a Mac, do not just drag the project file or folder into the BlueJ icon on your dock!). If all goes well, you should end up with a project window like the one below:
The gray stripes appear on the class icons because the classes haven't been compiled yet. We can't interact with the classes until they are compiled, so click on the "Compile" button on the left side of the screen to compile all the classes before proceeding. If something goes wrong, it's typically because either Java isn't properly installed on your machine, or BlueJ hasn't been configured properly and is having trouble finding the Java compiler. Let me know if the compilation fails, and I'll be happy to help you sort things out.

From Shapes to Robots

Now that you have the project open and compiled, you can start creating and manipulating objects. For this project, the objects will be creating are Shapes (Circle, Triangle, or Square). You can create or instantiate objects by right-clicking on the appropriate class (the orange box) and selecting the new <classname>() method. For example, if you right-click on the Circle class, you should be able to select the new Circle() method:

You will be prompted to provide a name for your object in order to keep track of it. To continue with the default name shown in the textbox (e.g. circle1), click the "Ok" button. At this point, a window with a small blue circle in it should pop up, and in teh workbench (the lower left corner of the BlueJ window) you should now see a red box marked with the object's name and class. The red box represents and gives you access to the object you just created.
You can now begin calling methods on the circle and changing its attributes. Right-click on the red object box to see a list of methods you can call on it. Certain methods will give you information about the shape (such as its size or color), while others will let you change it (such as its size and color).
- If you accidently close the window with the drawing, you can select the void makeVisible() method from the ShapeCanvas class to make it appear again.
- DO NOT select the red "Remove" option at the bottom of an object's method list: this will remove the object from the object bench, but not from the drawing! And since it is removed from the bench, you'll never be able to call a method on it again. You should first call the void removeSelfFromCanvas() method on the object in order to remove it from the Canvas---then you can remove it from the bench.
- If you select the red "Inspect" option from the BlueJ menu, you will get a window that shows you all of the attributes of the object: This shows the circle's x and y position (measured from the center), its radius, its color, and whether it is filled in. This is very helpful for getting details about what changes you have made to a shape!
Your first task is to create and manipulate shapes in order to create a drawing of a simple robot (you can make a complex robot, but the more complex your drawing the harder the next section will be--read ahead!). Your robot can look however you want--be creative--but it needs to be identifiable as a "robot" (not just a bunch of random shapes!).
- As you create the robot, you'll need to write down what shapes you create and the text of the methods you call. For example, if you have a Circle object called "hed" and you call the void setColorByName() method and specify the color "yellow", you'd want to write down: You will need this information later! Be sure and type it carefully
- You can use the "Inspect" option to look up the attributes after you've moved things around a lot. For example, if you find that your x-position is 50, then you don't need to worry about whether you moved the circle 50 then 80 then -30 then 12 then -100 then... etc. You can just use the void setXPosition() to put the shape exactly where you want it.
- Special tip! Notice that the y-axis goes down--that is, moving vertical a positive amount actually moves the shape down the screen, not up!

Programming the Drawing

Here's the neat part: in creating your robot, you're actually programming! You're giving a set of instructions to the machine about how to manipulate objects in order to create a desired output---you've just used the BlueJ interface instead of writing the program in Java. Your second task is to write the program in Java.
You'll need to start by creating a new Java class to hold your program. In effect, we're going to make a new class to represent your Robot Drawing. Click the "New Class" button to create one; name the class RobotDrawing and hit "OK".
Double-click on the orange class box to open the source code editor. BlueJ will have automatically added some sample code; you should delete it/modify it so that it looks like the following: Yes, you will need to type that phrase in: this is called a main method (because it is a method named "main"). Get used to typing it; you'll be doing it a lot! Don't worry if you don't understand what it all means yet--we'll talk about it soon!
Now here is the tricky part: between the inner-most set of curly braces ({}) in the yellow box, you will need to type in the methods you called in BlueJ in order to create your robot. Now do you see why you wrote down the methods you called?
- For example, if you called the new Circle() method to create a Circle object called "head", and then called the void setColor() method on that object and specified the color "yellow", then your code might look like:
```
Circle head = new Circle();
head.setColorByName("yellow");
```
  Notice that the first line includes the "new Circle()", though with some extra stuff at the front (the name of the class, followed by the "name" of the object, followed by an = sign, and with a semicolon at the end). Notice that the second line contains exactly the text that you write down, followed by another semicolon!
- After you've typed in a complete method call, you can hit the "Compile" button in the upper corner. This will compile your program.
- Finally, back in the main BlueJ window you can right-click on your RobotDrawing class and select the void main(String[] args) method. Hit "OK" at the option window that pops up, and you should be able to see your method calls being run automatically!
- This can be very challenging--if you type something wrong, when you try and compile BlueJ will highlight the line and tell you (for example, if you forget that blasted semicolon). It may also highlight if you get the capitalization wrong. Remain cool and don't feel frustrated---everyone makes mistakes when doing this (even the professor)!
When you are done, running your program (by selecting the void main(String[] args) method) should let you see your robot recreated at a whim!

Submitting Your Assignment

There are a couple of details to keep in mind before you submit your assignment.

Make sure your RobotDrawing program works--you should be able to run it and see your robot appear!
You will also need to fill out the README.txt file. You can open this file in BlueJ by double-clicking on the white paper icon in the upper left corner of the class window. You should place the answer to each question below the question box, replacing the "<Replace this with your response!>". Remember to save your changes (select "Class > Save" from the menu).
You will need to upload your entire DrawingShapes folder to the Hwk1 folder on the hedwig server. You will need to connect to the network drive to do this. Make sure you upload your work to the correct folder!.
- Be sure an upload the ENTIRE DrawingShapes folder--that is what includes all your work! The "package.bluej" file is deceptive--it isn't actually the project or package, just a file that is used to open BlueJ! If you just give me that file, I won't be able to see your work.
This assignment is due at midnight on Wed, Sep 11.

Grading

This assignment will be graded on approximately the following criteria (note it will be hard not to get full credit on this assignment).

You have successfully submitted a BlueJ project file [10%]
You have created a RobotDrawing class [25%]
Your RobotDrawing class draws a robot! [60%]
You have completed the included README.txt file [5%]