Lab 4 - Lynxes and hares, part II: Grapher proto

You should have a partner for this lab!

Introduction:

This lab continues toward the goal of being able to display the output of the LV equations as both a graph and a phase space diagram.

You job in this lab is write a prototype Grapher. Allow the user to enter up to 10 ints in a TextField. After each is entered, display all the values entered so far in your Grapher. Draw and label the two axis. Use OutlinedFilledCircles for the points (as demo'ed in class; feel free to name them GraphCircles or some such). Store the values entered in an ArrayList<Integer>. Assume all values are between 0 and 100.

Here's a hint that will make your task simpler. Instead of using numbers everywhere (for the drawLines, drawStrings, and where are the data circles), use variables. Like this:

            int width=400;        // assuming your Frame is 500x500
            int top=50;           // the top of the graph (i.e. where 100 goes)
            int bottom=top+width; // the bottom of the graph (where 0 goes)
            int left=50;          // left edge, where the y-axis goes
            int right=left+400;
That way you can let the machine do the arithmetic, and, if you decide to change the size of the Frame, there's only one number to change instead of ALL of them!

How to proceed:

  1. Understand the problem
    1. What will the user do?
    2. What will your program do the first time the user enters a number?
      1. Storing the info (use an ArrayList<Integer>)
      2. Drawing the points on the graph
    3. What will your program do each subsequent time the user enters a number?
    4. How will your program do that? What objects will say what to what other objects?
    5. How will your Grapher calculate where each circle goes?
  2. Decide what classes to write, where information will be stored. Here's one set:
    1. GraphFrame: The Frame that the user will type the numbers into
    2. Grapher: The Frame that the graph will appear in
    3. GraphCircle (which could be Eye with the color of the iris and pupil reversed; in that case it brings along FilledCircle and Circle with it
  3. Draw pictures
    1. The Frame that the user will type the numbers into
    2. The Frame that the graph will appear in
    3. The classes you will use
  4. Stepwise refine the Grapher class
    1. draw axes
      1. draw x-axis (use drawLine(x1, y1, x2, y2);)
      2. draw y-axis
      3. draw labels (use drawString(aString, x, y);)
    2. draw points; like this (if you store Integers)
                          int x = 0;)
                    for (Integer nextInt: list) {
                        x += width/10; // to move over 1/10 the width
                        GraphCircle theCircle = new GraphCircle();
                        theCircle.setX(x);
                        int y=some formula using nextInt; (bottom - nextInt.intValue()*width/100?)
                        theCircle.setY(y);
                        theCircle.paint(g);
                    }
      You could also store GraphCircles. Each time the Grapher is sent a number to store, it converts it to a GraphCircle and stores that (use an ArrayList<GraphCircle>). This makes it simple to draw points, and complicated to store each input (instead of vice-versa; you can't get something for nothing!).
    3. draw lines - extra credit!

Extra credit:

Draw lines between the circles! This will require some thinking...

How to get credit: demo with your partner in lab on Thurs; arrange to come in with your programming partner to do your demo.