Getting started

To get the needed files for this week's lab, go to a chosen location within your home directory on turing and execute the command:

cp -Rp ~goldwasser/csp125/labs/curve .

You should also create a new text file in which you can record your answers to the various questions posed in this lab. Please submit this file of answers electronically to complete the lab.

Overview of Parametric Curves

Our goal for this lab is to use EzWindows to visualize data. In particular, we will use the graphics primitives to animate what are known as parametric curves.

Let's start with a common example, namely a classic parabola. Perhaps you are familiar with the parabola often associated with the curve, Y = X². This parabola is an infinite curve, but we might choose to visualize a portion of it in our graphical window.

Here is how we might go about that. We could pick a variable, t, which we will then use as a loop variable. For example, let's consider letting t go from 0.0 to 1.0, incrementing it by 0.05 in each iteration. Each time through the loop we can plot one point on our desired curve by setting x and y based upon the following formula:

x = t;
y = t*t;

We have already implemented a basic graphing program for you in a file curve.cpp for this week's lab. The primary loop for graphing points proceeds as:

  double t;
  double x;
  double y;

  for (t=0.0; t<=1.0; t += 0.05) {

    x = t;
    y = t*t;

    drawPoint(W,x,y,0.1);
  }

Now go to your working directory for this lab, type make to compile your program, and curve to run it. Does it look like you expect?

To better understand the process, let's explore the effect of various changes we can make in the loop structure.

Question 1

Change the loop condition so that it continues as long as t<=3.0 rather than as originally written (i.e., t<=1.0). Then recompile and rerun your program. Explain, in your own words, your observations in how this change effects the program.

Question 2

Keeping the previous change you have made, let's now change the initialization condition so that t is initialized to equal 1.0 rather than 0.0. Again recompile and rerun your program. Explain, in your own words, your observations in how this change effects the program.

Question 3

Let's now consider the effect as we change the update statement of the loop, namely how the value of t is changed along the way. In the original program, we use the command t += 0.05. Please change this to instead read t += 0.25. Recompile and rerun your program. Explain, in your own words, your observations in how this change effects the program.

The Coordinate System

By now, you still may have noticed that our parabola still doesn't look the way we remember it from math class. For starters, we only see one half of it, but more importantly it appears to be upside down! Remember that the standard mathematical coordinate system is such that the x-axis is aligned with largest value to the right and the y-axis is aligned with largest values to the top.

As it happens, we can change the effective origin of our drawing as well as its orientation by adjusting the formula which we use in setting x and y. For a simple case, let's show how we can move the entire figure 5cm to the right. To do this, change the assignment

x = t;

x = t + 5.0;

To change the orientation of the y-axis takes a bit more care. Since we have created a 10x10 window for this program, the coordinate y=0 designates the top edge of the window and the coordinate y=10 designates the bottom edge of the window. Though we cannot really change this fact, we can instead adapt our drawing technique to accomodate it. In particular, if we replace the assignment

y = t*t;

y = t*t;
y = 10.0 - y;

Question 4

What is the effect of adding 1.0 in the context, thus reading

y = t*t + 1.0;
y = 10.0 - y;

Try it out and explain in your own words what happens and why!.

Finally, we still only have half of our beautiful parabola. If we wanted to get a left and a right half, we could change the range of values for our loop over t. Write the loop so that t starts at -2.0 and increases to 2.0.

Question 5

Once you get both sides of the parabola displayed, please type up the precise loop statement which you used in finding success.

Question 6

Finally, what if we wanted to draw the identical curve in the identical location, but we want it animated as drawn from right-to-left rather than left-to-right. Try to accomplish this task by either rethinking the loop statement or rethinking the mathematical equation. Once you get both sides of the parabola displayed, please type up the precise loop statement which you used in finding success. Once you find success, please type up the code fragment which you used.

A circle

Being rather bored with the parabola, let's move on to some other shapes. We can describe a circle, centered at (c_x,c_y) and with radius r using the following parametric mapping as t is allowed to range from 0 to 2*pi:

x_t = c_x + r * cos(t)
y_t = c_y + r * sin(t)

For example, we could create a circle of radius 2, centered at (3,7) using the following C++ code, based upon use of the sin and cos which are included in the standard libraries.

  const double PI = 3.14159;
  for (t=0.0; t<=2*PI; t += 0.05) {

    x = 3.0 + 2.0*cos(t);
    y = 7.0 + 2.0*sin(t);
    y = 10.0-y;             // reorient the y-axis

    drawPoint(W,x,y,0.05);
  }

Question 7

Type in the above code yourself. When you get it working run it and observe what you see. Describe where you find the center of the circle (relatively to the top/bottom, left/right of the window). Which part of the circle (relative to its center) was animated first? Was it drawn in a clockwise or counter-clockwise fashion?

A spiral

We could easily turn the above circle into a spiral. First, let's recenter it at (5,5) rather than (3.7). To get the spiral, we wish to have the "radius" from the center increase as t increases, rather than be fixed. So let's use the following formula:

x_t = c_x + t/4 * cos(t)
y_t = c_y + t/4 * sin(t)

Question 8

If you successfully get your spiral drawn, please copy the code you used for the for loop to your answer file.

This is the end of the formal lab. Please submit your single answer file electronically.

Extra Time?

Now that we have the engine for drawing such parametric curves, there are many other interesting ones we could try.

Gateway arch

x_t = 5.0 + t
y_t = 1.0 + cosh(t)

Where did our circle go?

x_t = 5 + cos(3*t)
y_t = 5 + sin(t)

To infinity and beyond...

x_t = 5 + cos(t)
y_t = 5 + sin(2*t)

Combination of the above two

x_t = 5 + cos(3*t)
y_t = 5 + sin(2*t)