Understanding the Straight Line Equation (y = mx + c) | Maths Explanation for C# Kids
In this tutorial, you'll learn how to draw a straight line in C# using basic coordinate geometry principles. This lesson is designed for senior secondary students studying linear equations and straight-line graphs. We'll use simple C# code to plot points, calculate the slope, and visualize the line on a canvas.
In coordinate geometry, whether for use in C# 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 C#,
whether for graphics, animations, or math-based programming.
Example: Finding the Line Equation Between Two Points | Maths Explanation for C# Kids
In C#, you can formulate line equation using two known points:
Given any 2 points on the C# 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 C# 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 C# 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 C#-ready straight line equation that you can use to animate objects or draw lines on a canvas.
C# Code Example - Animate Object Along a Straight Line
To animate a dot along a straight line in C#, we can increment the x-coordinate and compute the matching y-coordinate using the equation of the line.
Let's implement a C# animation algorithm with the above equation representing points (x1, y1) = (50, 50) and (x2, y2) = (100, 200).
Create a new C# Windows Forms Application
project
;
call it Dymetric_CS.
Create 2 new C# classes;
Call them Dymetric and StraightLine.
Type out the adjoining C# code for animating an image body through the path of a straight line.
Important: To generate the Form1_Paint C# code stub,
select the form in design mode; go to its properties; click on the
symbol and select Paint.
Summary: Visualizing Linear Equations in C#
The straight line equation is one of the first concepts students learn in senior secondary mathematics. In C#, we can easily plot a line by defining its slope (m) and intercept (c). This C# maths tutorial demonstrates how to compute the equation of a line given two points and visualize it using code.
Using C# to draw straight lines helps students understand the relationship
between slope and intercept in linear equations.
The simple C# code example provided demonstrates how to draw and animate a straight line in C#
using the slope-intercept equation. It's a fundamental concept in mathematical programming,
computer graphics, and C# animation.
This foundation helps you transition into more advanced C# graphics and animation projects.
So! C# Fun Practice Exercise - Animate in Straight Line
As a fun practice exercise, try modifying the C# code to explore different gradients and intercepts. This will be a great way to connect mathematics and programming, and help you understand more about C# animations and linear equations.
C# Straight Line Window Display Code Stub
C# Straight Line Code for Dymetric Class
namespace Dymetric
{
class Dymetric
{
private StraightLine line_motion;
private bool do_simulation;
public Dymetric(int width, int height)
{
line_motion = new StraightLine(width, height);
do_simulation = false;
}
// decide what course of action to take
public void decideAction(PaintEventArgs e, bool click_check)
{
if (do_simulation && click_check)
{
// do animation
line_motion.inPlay(e);
do_simulation = false;
}
else
{
// Put ball on screen
line_motion.clearAndDraw(e);
do_simulation = true;
}
}
}
}
C# Animation Code for Straight Line Class
using System.Threading;
using System.Drawing;
using System.Windows.Forms;
namespace Dymetric
{
class StraightLine
{
private int x1, y1, x2, y2, x, y;
private double m, c;
private const int dotDIAMETER = 10;
// we'll be drawing to and from a bitmap image
private Bitmap offscreen_bitmap;
Graphics offscreen_g;
private Brush dot_colour, bg_colour;
public StraightLine(int screen_width, int screen_height)
{
dot_colour = new SolidBrush(Color.Yellow);
bg_colour = new SolidBrush(Color.LightGray);
// Create bitmap image
offscreen_bitmap = new Bitmap(screen_width, screen_height - 55,
System.Drawing.Imaging.PixelFormat.Format24bppRgb);
// point graphic object to bitmap image
offscreen_g = Graphics.FromImage(offscreen_bitmap);
// Set background of bitmap graphic
offscreen_g.Clear(Color.LightGray);
x1 = x = 10;
y1 = y = 10;
x2 = offscreen_bitmap.Width - 50;
y2 = offscreen_bitmap.Height - 50;
m = (double)(y2 - y1) / (x2 - x1); // slope
c = (x2 * y1 - x1 * y2) / (x2 - x1); // y-intercept
}
// draw first appearance of dot on the screen
public void clearAndDraw(PaintEventArgs e)
{
/*
* draw to offscreen bitmap
*/
// clear entire bitmap
offscreen_g.Clear(Color.LightGray);
// draw dot
offscreen_g.FillEllipse(dot_colour, x, y, dotDIAMETER, dotDIAMETER);
// draw to screen
Graphics gr = e.Graphics;
gr.DrawImage(offscreen_bitmap, 0, 55, offscreen_bitmap.Width, offscreen_bitmap.Height);
}
// repetitively clear and draw dot on the screen - Simulate motion
public void inPlay(PaintEventArgs e)
{
Graphics gr = e.Graphics;
// condition for continuing motion
while (x < offscreen_bitmap.Width - dotDIAMETER)
{
// redraw dot
offscreen_g.FillEllipse(dot_colour, x, y, dotDIAMETER, dotDIAMETER);
// draw to screen
gr.DrawImage(offscreen_bitmap, 0, 55, offscreen_bitmap.Width, offscreen_bitmap.Height);
x += 20;
y = (int)Math.Ceiling(m * x + c);
// take a time pause
Thread.Sleep(50);
}
x = x1;
y = y1;
}
}
}