JamesMadisonUniversity

Computer Science Department

CS 139 Lab: Fun with Looping - Build a target and a brick wall

Objectives:
  • Introduce students to simple Applets
  • Provide students practice in problem solving using looping
  • Have some fun while doing it.

Background:

 Applets are small programs originally designed to be embedded on web pages.  Today, you will create two applets that will paint an image into a window.  That image will be generated by repeatedly painting a shape multiple times to achieve certain effects.

New Terms:
  • paint - the "main" program for an Applet
  • Graphics - A class containing methods designed to make graphical objects such as rectangles, ovals, and lines
  • JApplet - A program designed to be embedded into a web site
  • extends - The class extending another class is a variant (specialization) of the extended class.  All Applet programs extend the base JApplet class.
  • javax.swing - A package containing the JApplet class
  • java.awt - A package containing graphical elements

Materials:

 Download ConCircle.java and Brick.java as starter programs.  Download Demo.html as starter web pages. 
Acknowledgment Lab by Nancy Harris

Part 1 General Instructions:

Set up your programming environment for this lab. You should create a folder into which you will store your programs.

Download the two programs from the materials section as well as the two starter html.

Part 2 Understanding how "painting" works.

  1. Starter imageOpen the file ConCircle.java. In JGrasp, compile the file, then run it using the Apple icon (this is an applet).
  2. Minimize the screen and then maximize to see this image.
This is an image of what ConCircle.java produces in its current form.  The screen is 400 pixels by 400 pixels and the circle is centered on the screen.  The top left hand corner of the window is considered the 0,0 position on the X and Y coordinates.  The X coordinate carries the object to the right and the Y coordinate carries the object down.  The image of the circle is at 175, 175.

The circle in this image is enclosed by an imaginary box which defines the positioning.  The position of the upper left hand corner of the box defines the coordinate position.  So this circle has as its upper left hand corner position 175 across and 175 down from the 0,0 position.

The colors come from the java Color class.  You will see a list of standard colors at the top of this document (from the Java APIs).  See the document at this link: http://download.oracle.com/javase/6/docs/api/java/awt/Color.html
Feel free to "play" with other colors.

  1. Move the circle so that it is in the upper left hand corner of the box.  What did you need to change?
  2. Move the circle so that it is in the lower right hand corner of the box.  Careful that you don't run off the page.
  3. Make the circle bigger.
  4. Make the circle as big as the enclosing box will allow.
  5. Change the color of the circle.
You're now ready to move on to more challenging projects.

Part 3 Create concentric circles.

concentric circlesFor this part, you will try to reproduce the pattern you see at the left.  Notice that the largest circle is enclosed by the window itself (assuming a 400 x 400 window) and there are 8 circles, the smallest of which is 50 x 50 pixels.  The center of each circle is at position 200, 200.  Since each object overlays the next, you will need to start with the largest circle (which begins at position 0,0, and works down to the smallest which is at position 175, 175.  Work out a formula that would involve a looping solution so that you don't have to draw each circle on its own.  

Part 4 Testing this as a web page.

  1. Open the file Demo.html with any text editor.  This is a shell web page.  
  2. Inside the body (between the <body> and </body> tags, but after the heading for the concentric circles, add in the lines: 
            <applet code = "ConCircle.class" width = "400", height = "400">
      </applet>   
  1. Test your web page by opening a web browser and viewing the file in the web browser.

Part 5 Another pattern. 

Brick WallIn Brick.java, a single brick has been placed at the bottom left hand corner of a "wall".  But the wall is not yet made.  Your task is to build a wall that is 4 bricks high and alternates the bricks in the pattern that you see to your left.  Notice that instead of picking a standard color,  the brown is built from RGB values.  The color that you see displayed consists of different light values of Red, Green, and Blue from 0 - 255.  The higher the color, the more of that particular color is in the light.  So 255,0,0 is Red.  These are often expressed as hexidecimal values.  255,0,0 in decimal numbers would be FF, 0, 0 in hex.

This is not an easy pattern.

  1. Realize that we are dealing with full bricks here (although it could be done with "half" bricks.)  The other half of the brick is off the page.  So for row 2, the first brick starts at -37 or 1/2 of the brick width.  
  2. The spacing between the bricks is about 4 pixels.  This should be added to each starting location to "push" the next and subsequent bricks over.
  3. The bricks are "falling" off of the edge of the page to the right by one brick.  
  4. When you begin, try to build a single layer of bricks to get the spacing right.
  5. Add in additional layers, but don't worry about the offset.
  6. Finally, add in the half brick offset on the even layers or odd layers (your choice).  
When finished, add it to the HTML page.

Recieve credit for this lab by demoing for the instructor or TA on Tuesday.  If you don't finish on Tuesday, you can upload the URL for your web page onto the assignment.  Do not upload code...simply provide a link to the lab.

Created 10/19/09 (nlh)