usingMaths.com
From Theory to Practice - Math You Can Use.







<< PreviousNext >>

Animating along a Straight Line in C# - Slope, Intercept, and Line Equation



Visualizing the Straight Line Equation with C#

In senior secondary mathematics, the straight line equation is a foundational concept in coordinate geometry. By bringing these formulas into the world of programming, we can transform static graphs into interactive visualizations. In this tutorial, you will learn how to use C# to calculate, draw, and animate objects along a straight line path using the \( y = mx + c \) formula.


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# Windows Form (\(x_1, y_1\)) and (\(x_2, y_2\)); we'll have:

C# straight line graph coordinates for linear equation y = mx + c
Figure: C# straight line graph coordinates for linear equation \( y = mx + c \)
\[ \begin{align*} \frac{y_2 - y_1}{x_2 - x_1} &= \frac{y - y_1}{x - x_1} \\ \Rightarrow y &= (\frac{y_2 - y_1}{x_2 - x_1})x + \frac{x_2y_1 - x_1y_2}{x_2 - x_1} \\ \end{align*} \]

Comparing this linear equation, for the given C# windows form points, to the general equation of a straight line, i.e. \( y = mx + c \)

\[ \begin{align*} m &= \frac{y_2 - y_1}{x_2 - x_1} \\ \& \\ c &= \frac{x_2y_1 - x_1y_2}{x_2 - x_1} \end{align*} \]

Say we are to find the equation for the line passing through the arbitrary points (50, 50) and (200, 100) on a C# windows form:

\[ \begin{align*} m &= \frac{100 - 50}{200 - 50} = \frac{50}{150} = \frac{1}{3} \\ \& \\ c &= \frac{200(50) - 50(100)}{200 - 50} = \frac{10000 - 5000}{150} \\ &= \frac{5000}{150} = \frac{100}{3} \\ Hence, \\ y &= \frac{1}{3}x + \frac{100}{3} \\ or \\ 3y &= x + 100 \end{align*} \]

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 \( (x_1, y_1) = (50, 50) \) and \( (x_2, y_2) = (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 lightning bolt symbol and select Paint.


Why Use C# to Learn Straight Line Graphs?

Using C# to visualize linear equations provides several advantages:

  • Improves understanding of slope and intercept
  • Makes coordinate geometry interactive
  • Connects mathematics with programming
  • Helps students see how equations affect graph behavior

Instead of memorizing formulas, students can experiment by changing values of $m$ and $c$ to observe how the straight line graph changes instantly.


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

using System.Windows.Forms;

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;
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;
        }
    }
}






<< PreviousNext >>