Lab 1: Dot Displayer

Each student must work individually on this assignment. If you have any questions on how to do something, you must ask me for assistance. You may not ask questions of other humans.

Please see the file in the project for required intermediate deliverables.

Learning Outcomes

Resources Needed


Prior to smartphones and tablets, parents resorted to flattened wood pulp and sticks of colored wax to occupy their kids' attention. One popular App for paper and crayons was called "Connect the Dots" or "Dot to Dot." The "screen" consisted of a collection of numbered dots. The user was required to draw lines between consecutive dots. If the user worked the App correctly, a piece of art emerged. In this assignment you will build the foundation for a multi-week project. The subsequent two laboratory assignments will build on this one, allowing you to improve your initial submission, based on feedback from your instructor, and expand the program's functionality.


You must create a program that will read a picture from a .dot file and graphically display the picture stored in the file.

User Interface
Figure 1: User Interface

Your program must have two menu items:

Note that the Number of Dots menu item is not required for this lab but will be an added requirement in lab 2.

The Draw menu items should only be active when a picture has been loaded.

Class Structure

All of your classes should be placed in a package whose name matches your MSOE username.

You must implement two classes:

The Picture class must implement the following methods:

.dot File Format

Your program must be able to read dot files that contain a list of dots. The file is formatted such that each dot is on a separate line. A dot consists of a horizontal and vertical component separated by a comma. Each component is a floating point value between zero and one. For example, looks like this:

    0.1, 0.1
    0.9, 0.1

There are several .dot files in the data folder for the repository.

Drawing Dots

A dot can be drawn on a Canvas by first obtaining the GraphicsContext and then calling the fillOval() method. Be sure to set an appropriate fill color and center the dot over its coordinate location.

Drawing Lines

Lines should be drawn between all neighboring dots, including a line from the last dot back to the first dot. The lines can be drawn on a Canvas by first obtaining the GraphicsContext and then creating a path. To do this:

  1. Call beginPath()
  2. Move to the location of the first dot by calling moveTo()
  3. Draw a line to the next dot by calling lineTo()
  4. Repeat the previous step for all dots
  5. Call closePath()
  6. Call stroke() to draw the path

Exception Handling

There are several situations that could cause your program to throw an exception. For example, if the file is not found, cannot be opened, or contains incorrectly formatted data, it is likely that an exception will be thrown. In these cases, the program should display an useful message in an Alert.

Just For Fun

Ambitious students may wish to:


This laboratory assignment was developed by Dr. Chris Taylor.

See your professor's instructions for details on submission guidelines and due dates.