Visual Basic.Net: Using Trigonometry to draw graphics
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.
https://social.msdn.microsoft.com/Forums/getfile/612310
The Unit Circle with Radius Line / Hypotenuse and the sides of its triangle.
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?
https://social.msdn.microsoft.com/Forums/getfile/612312
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 SubEnd Class
See also
If you liked this see:
Using Trigonometry to draw graphic curves in VB.NET part 2.