I sometimes hear folks say they wish they understood using Sine and Cosine trigonometry functions to draw graphics in Visual Basic. So, here is a simple example of the basics. But, before we look at the code, lets review the part you hate about trigonometry, the Unit Circle.

# UNIT CIRCLE

Unit Circle, yuk! It just does not make sense? How can you have a unit circle when it has no units? While it is true the Unit Circle has no units, the word unit comes from the word UNITY which in math means the number one. We use a radius of 1 for the unit circle because it makes the numbers easy to work with. What is 1 times 2? That's much easier to calculate than 3.3333 times 2. So why would the circle have a radius of 3.333333?

Ok, now, here is the great reveal that you missed in school. Make a right triangle in the unit circle, such that the radius of the circle is the hypotenuse of the triangle as shown in the images. Note that the angle delta is measured from the x axis (horizontal) to the radius line that is the triangle hypotenuse. Now remember this: the Cosine of Delta is the length of the triangle's horizontal leg. And the Sin of Delta is the length of the vertical leg.

That is almost all your need to remember about trigonometry. Everything else is based on those principles.

# UNIT CIRCLE AT WORK

First, lets review what we have: a circle with a radius line, a triangle with a hypotenuse (same as the radius), a horizontal triangle leg length = Cos (delta) and a vertical triangle leg length = Sin(delta).

Now it should eventually start sinking in that the whole purpose of this is to let us calculate various parts of a triangle. And, just as important or even more important, it lets us calculate the (x, y ) coordinates of a point on a circle. Have you noticed yet that the coordinates of point P in the image are (x, y), which is just the lengths of the sides of the triangle. And most important, the lengths of the sides of the triangle are the values of cos, sin at the angle delta. So the coordinates at P = (x, y) = [cos(delta), sin(delta)] where x = cos(delta) and y = sin(delta).

Let's put some numbers to it now. Say Delta is 60 degrees measured from the horizontal X axis. What are the coordinates of point P on the circle? We know that the length of the horizontal leg of the triangle (X) is the Radius * Cosine of the angle Delta. And that is the same as x = cos(delta) when the radius is 1.

`x = r * cos(delta)`

`y = r * sin(delta)`

Using a calculator you get:

`x = cos(60 degrees) = 0.5`

`y = sin(60 degrees) = 0.867`

See how the sin and cos are sort of RATIOS of the Radius? X is equal to some ratio times the radius. Its just that sin and cos are not linear, they go around a circle, they are more circular.

# VISUAL BASIC AND THE UNIT CIRCLE

Now lets have some fun with what we have learned. What is the Visual Basic (VB) code for the equation in the last section?

`x = r * Math.Cos(d / 57.3)`

`y = r * Math.Sin(d / 57.3)`

Note the /57.3 converts from degrees to radians.

To visualize what is happening as Delta moves around the circle, it is easy to draw an animation using VB. In the following example we draw a radius line moving around a circle using trigonometry. I am not going to explain all the drawing details of the code as this is just an example showing use of the geometry. You can see our two sin and cos equations for computing x and y coordinates of the radius line in the code.

Using the form paint event we can draw our scene with each clock tick. First the circle perimeter is drawn using lines every 30 degrees. Then as the timer steps around the circle 30 degrees each step, we draw the radius line from the center of the circle to the current point on the circle at the sin and cos values for the delta angle.

Just to complicate things, the coordinate system in VB has the origin in the upper left of the window and the y axis increases from top to bottom. That's the opposite of the convention we have used so far. So you must watch for this difference in the y value direction.

There is a lot more to it. Like making a sin wave, or using for harmonic motion, and on and on.

Feel free to comment. Let me know if this article helps you. Maybe we will do some more if there is interest in the topic?

`Public`

`Class`

`Form3`

`'draws unit circle using trig`

`Private`

`WithEvents`

`timer1`

`As`

`New`

`Windows.Forms.Timer`

`With`

`{.Interval = 1000}`

`Private`

`Delta`

`As`

`Single`

`Private`

`DeltaStep`

`As`

`Single`

`= 30`

`Private`

`Sub`

`Form3_Paint(sender`

`As`

`Object`

`, e`

`As`

`PaintEventArgs)`

`Handles`

`Me`

`.Paint`

`Dim`

`Scale`

`As`

`Single`

`= 4`

`'create a scale of 2 units across the width of the form`

`Dim`

`ScaleRatio`

`As`

`Single`

`=`

`Me`

`.ClientRectangle.Width / Scale`

`'pixels/unit`

`Dim`

`r`

`As`

`Single`

`= 1`

`'set radius to 1 for the "Unit Circle"`

`Dim`

`fntheight`

`As`

`Single`

`= Scale / 25`

`Dim`

`x, y, x1, y1`

`As`

`Single`

`With`

`e.Graphics`

`Using p`

`As`

`New`

`Pen(Color.LightBlue, Scale / 1000)`

`Using br`

`As`

`New`

`SolidBrush(Color.Black)`

`Using f`

`As`

`New`

`Font(`

`"Arial"`

`, fntheight)`

`.Clear(Color.White)`

`.SmoothingMode = Drawing2D.SmoothingMode.AntiAlias`

`'scale the window`

`.ScaleTransform(ScaleRatio, ScaleRatio)`

`'move the 0,0 coordinate to the center of the window`

`.TranslateTransform(Scale / 2, Scale / 2)`

`'draw the axes`

`For`

`x = -Scale`

`To`

`Scale`

`.DrawLine(p, x, -Scale / 2, x, Scale / 2)`

`.DrawString(x.ToString, f, br, x, -Scale / 2)`

`.DrawLine(p, -Scale / 2, x, Scale / 2, x)`

`.DrawString(x.ToString, f, br, -Scale / 2, x)`

`Next`

`'draw the unit circle perimeter`

`p.Width = Scale / 200`

`p.Color = Color.Blue`

`Dim`

`rectf`

`As`

`RectangleF =`

`New`

`RectangleF(-r, -r, 2 * r, 2 * r)`

`.DrawArc(p, rectf, 0, 360)`

`'draw the lines around the circle`

`p.Color = Color.Red`

`p.Width = Scale / 150`

`p.EndCap = Drawing2D.LineCap.DiamondAnchor`

`x1 = 1`

`y1 = 0`

`For`

`d = 0`

`To`

`360`

`Step`

`DeltaStep`

`'calculate the coordinates of the point on the circle`

`'at the angle delta. Convert degress to radians for sin function`

`x = r * Math.Cos(d / 57.3)`

`y = r * Math.Sin(d / 57.3)`

`.DrawLine(p, x, y, x1, y1)`

`x1 = x`

`y1 = y`

`Next`

`.DrawLine(p, 1, 0, x1, y1)`

`'draw the radius line at the current angle set in the timer`

`p.Color = Color.Blue`

`p.Width = 0.05`

`x = r * Math.Cos(Delta / 57.3)`

`y = r * Math.Sin(Delta / 57.3)`

`.DrawLine(p, 0, 0, x, y)`

`'draw the values`

`x = -0.3 * Scale`

`y = -0.4 * Scale`

`.DrawString(`

`"Delta: "`

`& Delta.ToString, f, br, x, y)`

`Dim`

`t`

`As`

`String`

`=`

`"Cos: "`

`& Math.Cos(Delta / 57.3).ToString(`

`"f3"`

`) &`

`" Sin: "`

`& Math.Sin(Delta / 57.3).ToString(`

`"f3"`

`)`

`.DrawString(t, f, br, x, y + (2 * fntheight))`

`End`

`Using`

`End`

`Using`

`End`

`Using`

`End`

`With`

`End`

`Sub`

`Private`

`Sub`

`timer1_Tick(sender`

`As`

`Object`

`, e`

`As`

`EventArgs)`

`Handles`

`timer1.Tick`

`Delta += DeltaStep`

`If`

`Delta > 360`

`Then`

`Delta -= 360`

`Me`

`.Invalidate()`

`End`

`Sub`

`Private`

`Sub`

`Form3_Load(sender`

`As`

`Object`

`, e`

`As`

`EventArgs)`

`Handles`

`MyBase`

`.Load`

`Me`

`.DoubleBuffered =`

`True`

`timer1.Start()`

`End`

`Sub`

`Private`

`Sub`

`Form3_Click(sender`

`As`

`Object`

`, e`

`As`

`EventArgs)`

`Handles`

`Me`

`.Click`

`timer1.Enabled =`

`Not`

`timer1.Enabled`

`End`

`Sub`

`Private`

`Sub`

`Form3_Resize(sender`

`As`

`Object`

`, e`

`As`

`EventArgs)`

`Handles`

`Me`

`.Resize`

`Me`

`.Invalidate()`

`End`

`Sub`

`End`

`Class`

# See also

If you liked this see:

Using Trigonometry to draw graphic curves in VB.NET part 2.