Understanding the Straight Line Equation (y = mx + c) | Maths Explanation for VB.Net Kids
In this tutorial, you'll learn how to draw a straight line in VB.Net using basic coordinate geometry principles. This lesson is designed for senior secondary students studying linear equations and straight-line graphs. We'll use simple VB.Net code to plot points, calculate the slope, and visualize the line on a canvas.
In coordinate geometry, whether for use in VB.Net or any other language, the equation of a
straight line has the general form y = mx + c;
where m is the slope and c is the intercept on the y-axis.
For a vertical line, x is constant and for a horizontal line, y is constant.
This formula helps in calculating and drawing straight lines in VB.Net,
whether for graphics, animations, or math-based programming.
Example: Finding the Line Equation Between Two Points | Maths Explanation for VB.Net Kids
In VB.Net, you can formulate line equation using two known points:
Given any 2 points on the VB.Net Canvas (x1, y1)
and (x2, y2); we'll have:
| y2 - y1 | = | y - y1 | |
| x2 - x1 | x - x1 | ||
| ⇒ y = ( | y2 - y1 | ) x + | x2y1 - x1y2 |
| x2 - x1 | x2 - x1 |
Comparing this linear equation, for the given VB.Net canvas points, to the general equation of a straight line, i.e. y = mx + c
| m = | y2 - y1 |
| x2 - x1 | |
| & | |
| c = | x2y1 - x1y2 |
| x2 - x1 |
Say we are to find the equation for the line passing through the arbitrary points (50, 50) and (200, 100) on a VB.Net canvas:
| m = | 100 - 50 | = | 50 | = | 1 |
| 200 - 50 | 150 | 3 | |||
| & | |||||
| c = | 200(50) - 50(100) | = | 10000 - 5000 | ||
| 200 - 50 | 150 | ||||
| = | 5000 | = | 100 | ||
| 150 | 3 | ||||
Hence,
y = 1/3x + 100/3
or
3y = x + 100
This gives a VB.Net-ready straight line equation that you can use to animate objects or draw lines on a canvas.
VB.Net Code Example - Animate Object Along a Straight Line
To animate a dot along a straight line in VB.Net, we can increment the x-coordinate and compute the matching y-coordinate using the equation of the line.
Let's implement a VB.Net animation algorithm with the above equation representing points (x1, y1) = (50, 50) and (x2, y2) = (100, 200).
Create a new Visual Basic Windows Forms Application
project
;
call it Dymetric_VB.
Create 3 new VB.Net classes;
Call them Facet, Dymetric and StraightLine.
Type out the adjoining VB.Net code for animating an image body through
the path of a straight line.
Summary: Visualizing Linear Equations in VB.Net
The straight line equation is one of the first concepts students learn in senior secondary mathematics. In VB.Net, we can easily plot a line by defining its slope (m) and intercept (c). This VB.Net maths tutorial demonstrates how to compute the equation of a line given two points and visualize it using code.
Using VB.Net to draw straight lines helps students understand the relationship
between slope and intercept in linear equations.
The simple VB.Net code example provided demonstrates how to draw and animate a straight line in VB.Net
using the slope-intercept equation. It's a fundamental concept in mathematical programming,
computer graphics, and VB.Net animation.
This foundation helps you transition into more advanced VB.Net graphics and animation projects.
So! VB.Net Fun Practice Exercise - Animate in Straight Line
As a fun practice exercise, try modifying the VB.Net code to explore different gradients and intercepts. This will be a great way to connect mathematics and programming, and help you understand more about VB.Net animations and linear equations.
VB.Net Straight Line Window Display Code Stub
Private form_details As New Facet
Private action_class As New Dymetric
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
' Fill in Form - Put button on form
form_details.formFeatures(sender)
End Sub
Private Sub Form1_Paint(sender As Object, e As PaintEventArgs) Handles Me.Paint
' Colour button area
form_details.decorateButtonArea(sender, e)
' Call MovingBody class into action
action_class.decideAction(sender, Me.CreateGraphics(), form_details.CLICK_OCCURRED)
' Reset click variable
form_details.CLICK_OCCURRED = False
End Sub
End Class
VB.Net Straight Line Facet Window Code Stub
Dim screen_rect As Rectangle
Public CLICK_OCCURRED As Boolean = False
Public Sub formFeatures(sender As Object)
'Set window position, width and height
screen_rect = Screen.PrimaryScreen.Bounds
sender.SetDesktopBounds(0, 0, screen_rect.Width, screen_rect.Height)
' Set a display text
sender.Text = "useOfMaths.com"
' Set a background colour
sender.BackColor = System.Drawing.Color.LightGray
' Set an icon image
Dim path = System.IO.Path.GetDirectoryName(System.Reflection.Assembly.GetExecutingAssembly().CodeBase)
path = New Uri(path).LocalPath
Try
sender.Icon = New Icon(path & "\useOfMaths.ico")
Catch ex As System.IO.FileNotFoundException
' Well, just go on and use default pic
End Try
'
'create a button - response_btn
'
Dim response_btn As New Button()
response_btn.BackColor = System.Drawing.Color.Magenta
response_btn.ForeColor = System.Drawing.Color.Blue
response_btn.Name = "response_btn"
response_btn.SetBounds(CInt(Math.Round(screen_rect.Width / 2)) - 50, 5, 100, 40)
response_btn.Text = "Move"
sender.Controls.Add(response_btn)
AddHandler response_btn.Click, AddressOf response_btn_Click
End Sub
Public Sub decorateButtonArea(sender As Object, e As PaintEventArgs)
' Draw a dotted line
Dim pencil As New System.Drawing.Pen(System.Drawing.Color.Black)
pencil.DashStyle = Drawing2D.DashStyle.DashDot
pencil.Width = 5
e.Graphics.DrawLine(pencil, 0, 50, sender.Width, 50)
pencil.Dispose()
' Colour region
Dim paint_brush As New System.Drawing.SolidBrush(System.Drawing.Color.Pink)
e.Graphics.FillRectangle(paint_brush, 0, 0, sender.Width, 50)
paint_brush.Dispose()
End Sub
Public Sub response_btn_Click(sender As Object, e As EventArgs)
' turn this on on every button click
CLICK_OCCURRED = True
sender.Refresh()
End Sub
End Class
VB.Net Straight Line Code for Dymetric Class
Private line_motion As New StraightLine
Private do_simulation = False
' decide what course of action to take
Public Sub decideAction(sender As Object, g As Graphics, click_check As Boolean)
If do_simulation And click_check Then
' do animation
line_motion.play(sender, g)
do_simulation = False
Else
' Put ball on screen
line_motion.prep(sender, g)
do_simulation = True
End If
End Sub
End Class
VB.Net Animation Code for Straight Line Class
Private x1, y1, x2, y2, x, y As Integer
Private m, c As Double
Private Const dotDIAMETER = 10
Dim dot_colour As New System.Drawing.SolidBrush(System.Drawing.Color.Yellow)
Dim bg_colour As New System.Drawing.SolidBrush(System.Drawing.Color.LightGray)
' draw first appearance of dot on the screen
Public Sub prep(sender As Object, g As Graphics)
x1 = 10
y1 = 70
x2 = sender.Width - 50
y2 = sender.Height - 50
x = x1
y = y1
m = (y2 - y1) / (x2 - x1) ' slope
c = (x2 * y1 - x1 * y2) / (x2 - x1) ' y-intercept
' clear entire used canvas area
g.FillRectangle(bg_colour, 0, 60, sender.Width, sender.Height)
' draw dot
g.FillEllipse(dot_colour, x, y, dotDIAMETER, dotDIAMETER)
End Sub
' repetitively clear and draw dot on the screen - Simulate motion
Public Sub play(sender As Object, g As Graphics)
' condition for continuing motion
Do While x < sender.Width - dotDIAMETER
y = CInt(Math.Ceiling(m * x + c))
' redraw dot
g.FillEllipse(dot_colour, x, y, dotDIAMETER, dotDIAMETER)
x += 20
' take a time pause
Threading.Thread.Sleep(50)
Loop
End Sub
End Class