CSSE 220: Object-Oriented Software Development
Scenes

You will do this exercise by yourself, but be quick to ask questions of your instructor, student assistants and classmates as desired.

Goals

This exercise will let you:

Grading rubric

So 50 points is a perfect score, but you may earn up to 65/50 points if you do the BONUS as well.

Do this project using documented stubs throughout.

Use good style throughout.

For any points deducted, the grader will put a CONSIDER tag saying how many points were deducted and why.

Here is a link to the General Instructions for Grading Programs.

Overview

You will implement this project in stages, testing at each stage to see if the project works correctly through that stage.

Before beginning work, read over the titles of the seven stages below. Those titles are the iterative enhancement plan for this program and will give you a sense of what you're up against. You should also look at the figures in each stage.

Once you have an idea of what’s expected, begin working at Stage 1 and proceed through the stages in order, getting help as needed.

Don't forget to commit your changes to SVN after each stage!

Implement the project

Implement according to the following Iterative Enhancement Plan (IEP):

Stage 0. Study your goal.

In the final stage, you will draw a scene consisting of some houses, trees, a sun, and the sky and grass in the background:

You will draw the houses, trees, and sun in isolation, then put them all together.

Consider houses first. There are 3 classes:

Stage 1. Houses

Houses appear
  1. Open Eclipse.

  2. From your individual repository, checkout the Java project called Scene

  3. You have been given the House, HousesViewer and HousesComponent classes.

Stage 2a. Create PineTreesViewer and PineTreesComponent

  1. Add the PineTreesViewer and PineTreesComponent to your project

  2. Override the paintComponent method of the PineTreesComponent class.

Stage 2b. Creating the PineTree class

  1. Before we start putting together a PineTree, here are some notes about how a PineTree is drawn:

  2. Create the PineTree class
  3. Create a constructor that takes the 4 parameters specified above. Store the provided values in 4 private instance variables that you make.
  4. In the PineTreeComponent's paintComponent method, create a PineTree using the constructor, then draw it to the frame by calling the drawOn method. (Hint below if you get stuck on this.)
  5. In the PineTree's drawOn method, set the color to brown and create and fill the trunk using a Rectangle in the location given above.
  6. In the PineTree's drawOn method, create the branches in the location given above. The easiest thing to do it to draw 3 Line2D.Doubles. The only limitation is that you can't fill lines.
  7. If you want filled branches, you may instead use a Polygon (documentation here - basically, you put the x coordinates of each of the 3 corners of the Polygon into an array, put the y coordinates into another array, and pass them into the constructor). You fill it like any other shape: graphics2.fill(my polygon variable).
  8. Then back in paintComponent, draw another tree, half as tall, and located to the right so that the bottoms of the trunks are aligned.
  9. Finally, change your paintComponent to the following code for your final submission so that we can check that it looks like the picture below: 
    @Override
protected void paintComponent(Graphics graphics) {
	super.paintComponent(graphics);
	Graphics2D graphics2 = (Graphics2D) graphics;

	PineTree tree = new PineTree(100, 100, 100, 200);
	tree.drawOn(graphics2);
	
	PineTree littleTree = new PineTree(300, 200, 50, 100);
	littleTree.drawOn(graphics2);
}

It should look like this when you run PineTreeViewer:

Stage 3a. Create SunViewer and SunComponent

  1. Add the SunViewer and SunComponent to your project

  2. Override the paintComponent method of the SunComponent class.

  3. Place the following constants in the SunComponent class.

Stage 3b. Creating the Sun class

  1. Before we start putting together a Sun here are some notes about how a Sun is drawn:

  2. Create the Sun class

  3. Add the following constants to the Sun class:

  4. Add the following instance fields to the Sun class:

  5. Create a default constructor for the Sun class.

  6. Create a constructor with the following parameters:

    Set the instance fields based on the values provided to the constructor.

Stage 3c. Draw your first sun

Default sun without rays
Default sun without rays
Default sun without rays
Default sun with rays

  1. In the SunComponent's paintComponent method, create a Sun using the default (parameterless) constructor, then draw it to the frame by calling the drawOn method. (Hint below if you get stuck.)

  2. In the Sun's drawOn method, draw the center circle for the Sun based on its x and y values and the circleDiameter.

  3. Draw the rays in for the circle.

Stage 3d. Drawing more suns

Default sun without rays
With guide rectangles to verify sun positioning is correct
Default sun without rays
Adding little suns!

  1. Test that your positioning is working properly. Add this code to SunComponent's paintComponent method: 

    		//draws a rectangle around the default sun
		g2.drawRect(30, 30, 240, 240);
		
		//draws a rectangle around a new sun in a particular position
		s = new Sun(550, 100, 50, Color.BLUE);
		s.drawOn(g2);
		g2.drawRect(515, 65, 120, 120);

  2. Modify SunComponent's paintComponent method create multiple little Suns (use NUM_LITTLE_SUMS for the exact number), and draw them to the screen

  3. For your final submission, make sure your paintComponent() to the following so that we can check that it looks like the final sun picture: 
    @Override
protected void paintComponent(Graphics g) {
	super.paintComponent(g);

	// Get the 2D graphics object
	Graphics2D g2 = (Graphics2D)g;
	// Create a Sun using the default (parameterless) constructor, 
	// then draw it to the frame
	Sun s = new Sun();
	s.drawOn(g2);
	
	// Draw a rectangle around the default sun
	g2.drawRect(30, 30, 240, 240);
	
	// Draw a rectangle around a new sun in a particular position
	s = new Sun(550, 100, 50, Color.BLUE);
	s.drawOn(g2);
	g2.drawRect(515, 65, 120, 120);
	
	// Draw little suns
	double x = SunComponent.LITTLE_SUNS_X_OFFSET;
	for (int i = 0; i < SunComponent.NUM_LITTLE_SUNS; i++) {	
	  s = new Sun(x,
                      SunComponent.LITTLE_SUNS_Y,
                      SunComponent.LITTLE_SUN_SIZE, 
                      SunComponent.LITTLE_SUN_COLOR);
	  s.drawOn(g2);
	  x+= SunComponent.LITTLE_SUN_SEPARATION;
	}
}

Scene Instructions

In this pat, you'll put it all together!

Stage 4a. Create the SceneViewer, SceneComponent, and Scene classes

  1. Create the SceneViewer and SceneComponent using the same process as for Houses, PineTrees and Suns

Stage 4b. Create Scene

  1. Create a sky for the Scene by drawing a blue rectangle in the upper 375 pixels of the component.

  2. Create grass for the Scene by drawing a green rectangle in the rest of the component.

Stage 4c. Finish Scene

Scene with trees
  1. Add a Sun at the default location to the SceneComponent.
  2. Create a row of red houses in the foreground, evenly spaced so that they don't overlap, as shown. Loops are your friend!
  3. Create a row of 25 little pine trees (10 pixels x 40 pixels) behind the houses on the horizon.
  4. Create a row of 15 bigger (20 pixels x 80 pixels) in front of the first trees.
  5. (Optional) If you want to make them look more natural, you can randomize the x and y coordinates of the trees by a little bit. That's how I got the image at the top of this page. Your textbook has info on the Random class (or see the Java API, of course).

Stage 6. Rotatable Faces (BONUS)

Stage 6: Translated and rotated faces appear
  1. Create a Face class, FacesViewer class, and FacesComponent class.
  2. The geometry on this one is more complex than the others, using an Arc2D.Double for the mouth. The Geometry of a Face diagram gives numbers to use to construct the Face.
  3. Draw some faces in upright position. They can be whatever size and color you like, placed wherever you like, as long as they test your FacesComponent and Face classes adequately for this stage (so use different positions, radii, colors, etc).
  4. Implement a translate(double x, double y) method that translates the Face's position by the amounts given in the arguments.

  5. Implement a rotate(double angleToRotate) method that rotates the Face by the number of degrees given in the argument.

Turn-In Instructions

Add your files to source control: Right-click on the project, then select Team --> Commit. Be sure to add a brief commit message that describes what you have done. If you choose to commit a single file instead, you can right-click on that file and select Team --> Add to Version Control. However, you must commit that file in order for it to be posted on the SVN server.

Commit your project to your individual repository often is strongly encouraged, not only when you are done.