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.
In coordinate geometry, whether for use in JavaScript 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.
Example: Finding the Line Equation Between Two Points | Maths Explanation for JavaScript Kids
In JavaScript, you can formulate line equation using two known points:
Given any 2 points on the HTML5 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 HTML5 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 an 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 = 1/3x + 100/3
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 animate a dot along a straight line in JavaScript, we can increment the x-coordinate and compute the matching y-coordinate using the equation of the line.
Let's implement a JavaScript animation algorithm with the above equation representing points (x1, y1) = (50, 50) and (x2, y2) = (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
The straight line equation is one of the first concepts students learn in senior secondary mathematics. In JavaScript, we can easily plot a line by defining its slope (m) and intercept (c). This JavaScript maths tutorial demonstrates how to compute the equation of a line given two points and visualize it using code.
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.
This foundation helps you transition into more advanced JavaScript graphics and animation projects.
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
<html lang="en">
<head>
<title>Straight Track</title>
</head>
<body>
<h3>Move in a Line using its Equation</h3>
<canvas id="move_line" width="500" height="300" style="border: 1px solid #000000;">
Your browser (version) does not support canvas object; Time to update!
</canvas>
<button onclick="moveInLine()">Move</button>
<script>
var canvas = document.getElementById("move_line");
var context = canvas.getContext("2d");
context.fillStyle = "#888888"; // color for our moving body(circle)
var x1 = 50;
var x2 = 200;
var y1 = 50;
var y2 = 100;
var x = x1;
var y = y1;
// draw a dot
context.beginPath();
context.arc(x, y, 5, 0, 2 * Math.PI);
context.fill();
var m = (y2 - y1) / (x2 - x1); // slope
var c = (x2 * y1 - x1 * y2) / (x2 - x1); // y-intercept
function moveInLine() {
// condition for continuing motion
if (x <= 440) {
y = m * x + c;
// redraw dot
context.beginPath();
context.arc(x, y, 5, 0, 2 * Math.PI);
context.fill();
x += 20;
setTimeout(function () { moveInLine(); }, 100);
}
}
</script>
</body>
</html>