CS 161 Lab A - Moving Shapes

Due Thurs Jan 24 at 11:59pm

Overview

In this lab you will set up the BlueJ interactive Java environment (IDE) for future work this semester, and familiarize yourself with the program. You will use a provided project to practice creating and manipulating objects in order to create a basic picture of a robot. You will then practice submitting your work (in this case, a screenshot of the robot) electronically. Note that this first lab should be completed individually (not in pairs).

Objectives

To become familiar with the BlueJ IDE
To become familiar manipulating objects
To become familiar with the procedure for submitting your work

Necessary Files

You will need to download a copy of the DrawableShapes project.

Details

Use your official university username and password to log into any computer in the lab. Run the BlueJ IDE by clicking the shortcut on the desktop (or by successive clicking to follow "Start->All Programs->BlueJ->BlueJ"). If you choose to use your laptop, you might first need to install the Java Development Kit (JDK 7 or later) and BlueJ. Follow this link to download and install the JDK, and this link to download and install BlueJ. Let us know if you need help installing the JDK and BlueJ on your laptop. Once you've got BlueJ set up and running, continue to the next step.
Download a copy of the DrawableShapes project to experiment with: click and save the DrawableShapes.zip file to your desktop. Depending on how your computer has been configured, this file may have one of a few different icons (see examples below), representing a compressed folder (or zip file). The actual DrawableShapes project is inside this compressed folder, and you need to extract it before BlueJ can open the project. No matter what the downloaded file looks like on your desktop, 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. Again, if you have any problems with this process let us 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. Holler if the compilation fails, and we'll help sort things out. If you're trying this on your own, there are installation instructions on the downloads page that should help.
Now that you have the project open and compiled, you can start creating and manipulating objects. The first object we'll need is the window to "draw" our Robot on. This window is represented by a ShapeCanvas object, and so we'll need to make one of those. Right-click on the ShapeCanvas class (the orange box) and select new ShapeCanvas() in order to create a new instance of the class. You will be prompted to provide a name for the object in order to keep track of it. To continue with the default name shown in the textbox (e.g. shapeCan1), click the "Ok" button. Two things should happen: (1) a blank window show pop up that is your canvas, and in the workbench (the lower left corner of the BlueJ window) you should now see a red box marked with the object's name and class. This red box represents and gives us access to the object we just created.
This is a good start, but not very interesting. Go ahead and make yourself a new Circle object to represent a circle that will be drawn on the ShapeCanvas. Right-click on the Circle class and select new Circle(). Once again, you will be prompted to name your new instance; the default name (circle1) is fine. You should now see a new red box in the workspace indicating your Circle instance.
So now you have a Circle; however, you still need to put the Circle on the ShapeCanvas. To do this, we are going to call a method of the ShapeCanvas and tell it to add the Circle. Right-click on the ShapeCanvas object you created (not the class, but the object--the red box) and select void addShape(DrawableShape shape). BlueJ will now prompt you for extra information (what is called a parameter)---specifically, it wants to know WHICH Shape it should add to the canvas! In the box, type in the name of the Circle you wish to add (e.g., circle1); alternatively, you can select the entry box and then click on the red Object rectangle to select it. Hit "OK" once you're done. If everything goes well, you should see a small blue Circle appear on your ShapeCanvas window!
Now that we can see the Circle, we can start changing its attributes and see the updated Circle on the ShapeCanvas window. Right-click on the Circle object you created (not the class, but the object) to see a list of methods you can call on it. Certain methods will give you information about the Circle (such as its radius and color), while others will let you change the Circle (like it's radius and color). Try and call different methods to make the Circle bigger, yellow, and moved to the center of the ShapeCanvas window. Note that many method will ask you for a parameter---details about what color to make the Circle or how far to move it.
Once you've modified the circle, you will need to take a screenshot of it. Screenshots are helpful for sharing information about what your program has done!
- In Windows 7 you can use the Snipping tool found in Start > All Programs > Accessories > Snipping Tool; in older version of Windows you can take a screenshot of your entire desktop by hitting the Print Screen button (hit Alt+PrintScreen to only capture the current window) and then pasting the result into a Word document.
- On a Mac, you can take a screenshot by hitting Cmd+Shift+4 and then selecting the area you want to capture (or hit spacebar to select a single window). The screenshot is saved to your Desktop.
Submit the screenshot of your yellow circle. You will copy the saved sceenshot to the submission folder on the hedwig server. You will need to map the network drive that contains this folder. For Windows users, enter \\hedwig\jross_cs161 for the folder name. For Mac users, enter smb://hedwig/jross_cs161. Your submission folder for this lab is the LabA folder, then the folder with your username. If you have any problems, ask for help!
- Note: if you're using your own Windows computer, when moapping the network drive you may need to enter you username as pugetsound\username in order to map the folder using your Pugetsound account.
Now that you're able to submit your work, you can make create more shape instances in BlueJ (more Circles, as well as Rectangles and Triangles) by right-clicking on their respective classes. Once you have created a Shape, remember to add it to the ShapeCanvas!. You can also remove a shape from the ShapeCanvas by using the ShapeCanvas's void removeShape(DrawableShape shape) method. You can use methods to change the attributes of each shape; simply right-click on that Shape's box!
Your Assignment: create a bunch of shape instances, and manipulate them to create a picture of a Robot, similar to the example below. 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!).
Once you've finished your robot, take a screenshot and upload that to the LabA submission folder, as described above.

Submitting

Submit a screenshot of your yellow circle and a screenshot of your robot to the LabA submission folder on hedwig, following the instructions above. Make sure you upload your work to the correct folder! The lab is due at midnight on the day of the lab.

Notes

This lab is a warmup for this class. Don't be concerned if you don't understand any or all of the Java code in the DrawableShapes project. The goal is to become comfortable with using BlueJ, and using the BlueJ interface to instantiate objects and call methods to modify objects' attributes. As always, I welcome questions, so don't hesitate to ask!

Grading

This assignment will be graded on the following criteria (it is almost impossible not to get full credit on this lab!):

Submitted a screenshot of the yellow circle (30%)
Submitted a screenshot of your robot (70%)