15,114,611 members
Articles / Web Development / HTML
Article
Posted 10 May 2018

12.2K views
21 bookmarked

# Math Function Tutor: Part 1

Rate me:
10 May 2018CPOL5 min read
Math Function Tutor - Part 1

## Introduction

One of the Trigonometry students I have recently been tutoring was bewildered by the multitude of Trigonometric Identities. "If only I could visually, prove them..." she lamented. Well, this program is the result of trying to help her visualize the trig identities. And since she's learning to program, I figured why not build a general purpose Mathematical Function tool she could modify.

I've created a HelpFile.html that explains how to use the program. It is located in the Resources directory and is displayed when you click Help->Instructions. Before diving into the code, I urge you to peruse HelpFile.html by downloading the project and opening HelpFile.html with Chrome, Firefox, or your favorite browser.

## Quick Start

If you don't have the time to read HelpFile.html and just want to quickly see how my student was able to use the Math Tutor Program to visualize trig functions, follow these steps:

1. Download and build the solution as described below.
2. Run it by pressing F5 in Visual Studio. The program should look like the image above with four function curves displayed in different colors. Initially, the first one, the linear (straight line) function is shown in purple and a slightly heavier line than the other functions.
3. Click on "My Cosine Function" in the "Select Function" list box on the top right-hand side. Note that now the cosine curve is the active function and shown in a dark blue and a slightly heavier line than the other functions. Note also the controls are labeled Amplitude, Frequency, Phase Shift, and Amplitude Shift.
4. Use the Phase Shift slider control (or "track bar") to alter the phase shift value and watch how the cosine wave moves to "line up" with the sine wave (in green). When the value of the phase shift is pi / 2, or about 1.57, the two functions are aligned, visually proving the Trigonometric identity that the cos (x) = sin (pi / 2 - x).
5. In addition to the slider control, you can click the up and down arrow buttons on the numeric up-down control to change the value of the Phase Shift (or the Amplitude, Frequency, and Amplitude Shift). Or you can simply type a value into the text box and press Apply button.
6. Alternatively, you can click the "Start Timer" button to the right in the Phase Shift group box to start increasing the value of the Phase Shift, and click "Stop Timer" when the value reaches 1.6, a close approximation to pi / 2.

## Using the Code

Download and open the solution with Visual Studio. It consists of two projects:

1. `MathTutor` - the main forms for the solution
2. `ControlLib` - a library (DLL) that contains a .NET User Control

Build the solution by pressing F6.

The primary class is `MathFunction`:

C#
```public class MathFunction
{
public Func<double, double=""> MyFunc { get; set; }
public String Name { get; set; }
public String Formula { get; set; }
public Color ActiveColor { get; set; }
public Color InactiveColor { get; set; }
public Color LightColor { get; set; }
public double Amplitude { get; set; } // also known as parameter "A"
public double Frequency { get; set; } // also known as parameter "B"
public double HorizontalShift { get; set; } // also known as parameter "C"
public double VerticalShift { get; set; } // also known as parameter "D"
public String[] Labels { get; set; }
public double[] InitValues { get; set; }
public bool Visible { get; set; }
}</double,>
```

As explained in HelpFile.html, there are four pre-defined math functions and the main purpose of this program is to display their graphs on a .NET Picture Box called `picCanvas` on the `MathTutorForm`. Associated with each function are four parameters called `A`, `B`, `C` and `D` whose values can be changed by the controls on the right hand side. The four pre-defined math functions are stored in a list:

C#
`private List<MathFunction> mathFunctions`

The code is pretty straightforward as most of the operations are on the items in the `mathFunctions` list. For example, to set a given function so that it is not displayed, we simply set the `Visible` field to `false` in the Math Function Detail Dialog. In the Math Function Tutor Form (the form in the screen shot above), changing a function parameter control's value changes the associated parameter (`Amplitude`, `Frequency`, `HorizontalShift`, or `VerticalShift`). We have to make sure that when we change one control, the other two are updated as well. For example, here is the callback when the first numeric up down box is clicked. Note how the function's `Amplitude` value is updated in the `MathFunction` class, as well as the values in the text box and slider / track bar controls.

C#
```private void numericUpDownAmplitude_ValueChanged(object sender, EventArgs e)
{
int ndx = listBoxMathFunctions.SelectedIndex;
if (ndx < 0) return;

mathFunctions[ndx].Amplitude = (double)numericUpDownAmplitude.Value;
textBoxAmplitude.Text = mathFunctions[ndx].Amplitude.ToString("f2");
trackBarAmplitude.Value = (int)(mathFunctions[ndx].Amplitude);
this.picCanvas.Invalidate();
}```

The task of drawing on the canvas on the left hand side is done by `picCanvas_Paint` which calls the `DrawScene` method. The methods `LabelControls`, `DrawAxes`, `DrawCurve`, and `DrawPoint` do precisely what their name suggests.

C#
```private void DrawScene(Graphics graphics)
{
graphics.SmoothingMode = SmoothingMode.AntiAlias;
graphics.Clear(this.BackColor);

LabelControls();
DrawAxes(graphics);
DrawCurve(graphics);
DrawPoint(graphics);
graphics.Transform = transformation;
}```

An interesting capability I found on Stack Overflow (SO) is the ability to color a `ListBox` with custom colors; see `listBoxMathFunctions_DrawItem` for the SO link. I modified it slightly to change the font as well. As explained in HelpFile.html, that `ListBox` is used to select the active function. When the function is not visible (also explained in HelpFile.html), the text in the `ListBox` is displayed in italics to give a visual cue that the function is not visible.

## Math Function Detail Dialog

The `ControlLib` contains a class derived from `UserControl` that allows us to build a composite control consisting of a `GroupBox`, `TextBox`es, `Button`s, and so on.

C#
```public partial class MathFunctionUserControl : UserControl
{
...
}```

When we display the Math Function Detail Dialog, four `MathFunctionUserControls` are created, one for each of the four pre-defined math functions. These in turn are displayed in a `FlowLayoutPanel`. Using this dialog, you can set the name of the function, the colors, and whether or not it is visible on the canvas (`PictureBox`). As noted in HelpFile.html, the formula and control labels are read only in this version.

In Part 2, the ability to define your own functions will be provided. I will show how we evaluate the value of the functions using a recursive descent parser. You will also be able to type expressions into the text box controls and they will be evaluated by the parser.

## History

• 10th May, 2018: Version 1.0.0.0

## About the Author

 Software Developer (Senior) United States
Chuck Peasley is a developer in Orange County, CA

## Comments and Discussions

 First Prev Next
 My vote of 4 Luis Perez Garcia25-May-18 1:11 Luis Perez Garcia 25-May-18 1:11
 Tutor functions set avisal11-May-18 8:19 avisal 11-May-18 8:19
 Re: Tutor functions set charles92222-May-18 19:02 charles922 22-May-18 19:02
 avisal, Part 2 indeed has the ability to enter formulas: Math Function Tutor, Part 2[^]
 which chart component are you using? Southmountain11-May-18 7:47 Southmountain 11-May-18 7:47
 Re: which chart component are you using? charles92222-May-18 19:10 charles922 22-May-18 19:10
 Re: which chart component are you using? Southmountain8-Jun-18 8:36 Southmountain 8-Jun-18 8:36
 Last Visit: 31-Dec-99 19:00     Last Update: 29-Nov-21 2:48 Refresh 1

General    News    Suggestion    Question    Bug    Answer    Joke    Praise    Rant    Admin

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.