Drawing Straight Lines in java | Senior Secondary Maths Tutorial

Understanding the Straight Line Equation (y = mx + c) | Maths Explanation for JavaScript Kids

In this tutorial, you'll learn how to draw a straight line in JavaScript using basic coordinate geometry principles. This lesson is designed for senior secondary students studying linear equations and straight-line graphs. We'll use simple JavaScript code to plot points, calculate the slope, and visualize the line on a canvas.

Whether for use in JavaScrpt 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 JavaScript, whether for graphics, animations, or math-based programming.

Generating Straight Lines for JavaScript

Given any 2 points on the HTML5 Canvas (x₁, y₁) and (x₂, y₂); we'll have:

JavaScript straight line graph coordinates

	y₂ - y₁	=	y - y₁
	x₂ - x₁		x - x₁
⇒ y = (	y₂ - y₁	) x +	x₂y₁ - x₁y₂
	x₂ - x₁		x₂ - x₁

Comparing this linear equation, for the given HTML5 canvas points, to the general equation of a straight line, i.e. y = mx + c

m =	y₂ - y₁
m =	x₂ - x₁
&
c =	x₂y₁ - x₁y₂
c =	x₂ - x₁

Say we are to find the equation for the line represented by the arbitrary points (50, 50) and (200, 100) on a HTML5 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 = ¹/₃x + ¹⁰⁰/₃
or
3y = x + 100

This gives a JavaScript-ready straight line equation that you can use to animate objects or draw lines on a canvas.

JavaScript Code Example - Animate Object Along a Straight Line

To make a graphic (dot) travel by the equation of a line in JavaScript, continuously increment x, and use the equation to get the corresponding y value.
Let's implement a JavaScript animation algorithm with the above equation representing points (x₁, y₁) = (50, 50) and (x₂, y₂) = (100, 200).

Create a new file; On Notepad++: File, New.
Call it straight_line.html.
Type out the adjoining JavaScript code for animating an image body through the path of a straight line.

Summary: Visualizing Linear Equations in JavaScript

Using JavaScript to draw straight lines helps students understand the relationship between slope and intercept in linear equations. The simple JavaScript code example provided demonstrates how to draw and animate a straight line in JavaScript using the slope-intercept equation. It's a fundamental concept in mathematical programming, computer graphics, and JavaScript animation.

So! JavaScript Fun Practice Exercise - Animate in Straight Line

As a fun practice exercise, try modifying the JavaScript code to explore different gradients and intercepts. This will be a great way to connect mathematics and programming, and help you understand more about JavaScript animations and linear equations.

JavaScript Animation Code for straight_line.html

package dymetric;

import java.awt.*;

public class StraightLine extends Canvas {

    protected Color ball_colour;
    protected int x1 = 50;
    protected int x2 = 800;
    protected int y1 = 50;
    protected int y2 = 300;
    protected int x = x1;
    protected int y = y1;
    protected double m, c; // slope and y-intercept of a straight line
    protected final int aWIDTH, aHEIGHT;

    public StraightLine() {
        setBackground(Color.LIGHT_GRAY); // canvas color
        ball_colour = Color.RED;
        aWIDTH = aHEIGHT = 10;

        m = (double) (y2 - y1) / (x2 - x1); // slope
        c = (double) (x2 * y1 - x1 * y2) / (x2 - x1); // y-intercept

    }

    // Feel free to double buffer if flickering occurs
    public void paint(Graphics g) {
        g.setColor(ball_colour);
        // draw a dot
        g.fillOval(x, y, aWIDTH, aHEIGHT);
    }

    public void moveInLine() {
        // condition for continuing motion
        while (x <= 700) {
            y = (int) Math.ceil(m * x + c);
            paint(this.getGraphics());

            x += 10;
            // introduce a delay between renderings
            try {
                Thread.sleep(50);
            } catch (InterruptedException e) {
            }
        }
    }
}

I have a better version / See other versions.