Computer Science 252
Problem Solving with Java

Fall 2015, The College of Saint Rose

Home     Syllabus     Schedule     Examples     Style Guide     Refcard

The goal of our first "non-review" lab is to get everyone some practice using Objectdraw constructs to write event-driven programs to create and manipulate simple graphics objects.

You may help each other with this lab, but the work you turn in must be substantially your own. If you have previous Objectdraw experience, please help your classmates get up to speed.

There are a number of lab questions, and two practice programs, but no programming assignment in this lab. Please refer to the "Submission Guidelines" on the course home page and syllabus for the requirements for each of these items. Please work through this in order, as some of the lab questions require you to show intermediate steps that will not be in your final solutions. Also be sure to follow the directions precisely. While you will be encouraged to get creative with many of your programs this semester, for this assignment your program is to reproduce the picture and functionality as precisely as you can.

Getting Set Up

To get your BlueJ environment set up for this week's lab assignment, start BlueJ and choose "New Project" from the "Project" menu. Navigate to your folder for this course and choose the name "Lab4" (no spaces) for the project.

Create a document where you will record your answers to the lab questions. If you use plain text, call it "lab4.txt". If it's a Word document, you can call it whatever you'd like, but when you submit, be sure you convert it to a PDF document "lab4.pdf" before you submit it.

Also be sure you are able to download, run, and modify class examples.

Working solutions to the two programs can be downloaded here.

Lab Procedure

Recall that our class examples to date have introduced the Objectdraw graphics primitives Text, FilledRect, FilledOval, FramedRect, FramedOval, and Line. We have also seen the WindowController methods begin, onMousePress, onMouseRelease, onMouseClick, onMouseMove, onMouseDrag, onMouseExit and onMouseEnter.

A Summer Scene

Create a new "WindowController" class named Picture within your project. Before going further, put your name at the top and replace the default comment with one describing that this file is for this lab. Your development of the Picture program is a "Practice Program" as described in the submission guidelines.

Use the Objectdraw graphics primitives to create the following picture:

For this first version, you should have the entire picture appear when the program starts, so all of your graphical objects will be created in the begin method. A few notes about this:

• There is no need to declare any variables in this version of the program - we only need to name our graphical objects if we later need to refer to them to modify or query them.
• Recall that you can set the color of a graphical object as part of the same statement where it is constructed. For example, the "sun" in my program that generated the picture is constructed and set to be yellow with the following statement:

     new FilledOval(50, 50, 50, 50, canvas).setColor(Color.yellow);
  

• Your picture does not have to match mine exactly, but should have the same main components. Note the following:
  • The sun object consists of a yellow circle with a black outline, and a "smiley" made from a Text object.
  • The cloud object is made our of 4 FilledOvals.
  • It may look like there is a blue background, but that's really just a blue FilledRect large enough to fill the default (400 ×400) canvas.
  • Objectdraw objects are, by default, placed at the "top" of the canvas stacking order when they are constructed. That is, an object added to the canvas will obscure any pre-existing objects located in the same place.
  • We will soon be concentrating on making good use of named constants for the positions and sizes of the graphical objects in our programs, but these are optional this for this program. Your guesses for sizes and positions are likely to be sufficient for our purposes this time.

Adding Mouse Events

We will now make some modifications to the program to make it respond to some mouse events.

First, modify the program so the "leaves" of the tree (the FilledOval) turns red when the mouse leaves the window. It should turn back to green when the mouse re-enters the window. (3 points)

Since you now need to refer to the object after you construct it, you will need to give it a name. Since the object's name will be needed in three different methods, it should be declared as an instance variable at the top of the class.

When you introduce the new name (let's say you call it leaves), (incorrectly) assign its value to the result of the construction with the .setColor as part of the same statement.

  leaves = new FilledOval(75, 175, 70, 70, canvas).setColor(Color.green);

The reason for this is that your instance variable holds a FilledOval, but the result of the statement on the right hand side of the assignment is the result of the setColor call. Since setColor is a mutator method, it does not return a value.

In this situation, you need to break the construction and the setting of its color into separate lines.

  leaves = new FilledOval(75, 175, 70, 70, canvas);
  leaves.setColor(Color.green);

Our next modification is to delay the addition of the tree to the picture until the first time the mouse is pressed within the window. Move the code that create the tree to an onMousePress method.

The problem here is that there is a chance that you'll try to change the color of the leaves before they are first created. In this circumstance, the instance variable that refers to the leaves will be null. We can use this fact to make sure we only attempt to change the color of the object when it exists.

Insert appropriate conditionals to ensure that the color is changed only if the object exists. (2 points)

There is still a problem, but it is less obvious. Now, every time you press the mouse, a new tree is created. This results in the objects that make up the tree being constructed and stacked on top of each other. While this does not affect the correctness in terms of the picture produced, it is inefficient. In some other cases, constructing multiple copies of the "same" object would cause more visible problems.

Insert a conditional that ensure that the tree is only created on a mouse press if the tree objects do not yet exist. (2 points)

Moving

Next, we will add the capability for our sun and cloud to move. Our goal is to have each of these objects move a bit each time the mouse is pressed within that object.

Let's start with the sun. We are going to do something very similar to what you can see in the NudgeBall example. Modify your program's onMousePress method to move the sun (all three of its components) to the right by 3 each time the mouse is pressed within the sun. Note that you can check if the sun object contains the mouse press point by querying either the FilledOval for the yellow part of the sun or the FramedOval that represents its black outline. (3 points)

Now, we'll do the same with the cloud, except it should move to the left by 4 when any part of the cloud contains the mouse press point. (3 points)

Let's now make it so the sun and cloud go back to their original positions when the mouse leaves the window. Here, you will use the moveTo method on each object, which does an absolute move rather than the relative move of the move method. (3 points)

Our last task is to place a solid "sidewalk" between the lines on the grass, but it should only appear when the mouse is being moved and its position is over the grass. When the mouse is moved over the sky (or tree, or sun, or clouds), the sidewalk should be invisible.

There are two ways to make a single object disappear from the screen: the hide and removeFromCanvas methods that are available for all Objectdraw graphical objects. As a rule, we use hide when we would like an object to disappear but would later like it to reappear (with the show method). We use removeFromCanvas when it is to go away permanently. If we remove an object from the canvas and want to see it again, we would have to construct a new instance of the object.

In this case, we should use the hide/show technique. When the program starts, create the FilledRect for the sidewalk, but immediately hide it. Then in the onMouseDrag method, check if the mouse location is inside of the object representing the grass. If so, we show the sidewalk. If not, we hide it. Note that there is no harm in calling show on an object that is already visible or hide on an object that is already hidden. (2 points)

Some Dragging

One of the operations we will use most frequently with our graphical programs is dragging objects around on the canvas. The DragABall example shows the basics of dragging an object around.

Create a second Java class within your project for this lab called "DragBoxAndBall".

Submitting

Before 11:59 PM, Friday, September 18, 2015, submit your lab for grading. There are three things you need to do to complete the submission: (i) Copy your file with the answers to the lab questions into your project directory. Be sure to use the correct file name. If you prepared your answers in Word, export to a PDF file and submit that. (ii) Email a copy of your lab (a .7z or .zip file containing your project directory) to terescoj AT strose.edu. (iii) Demonstrate the execution of your programs for your instructor (2 business day grace period for demos).

Grading

This assignment is worth 35 points, which are distributed as follows: