Understanding the Straight Line Equation (y = mx + c) | Maths Explanation for Java Kids
In this tutorial, you'll learn how to draw a straight line in Java using basic coordinate geometry principles. This lesson is designed for senior secondary students studying linear equations and straight-line graphs. We'll use simple Java code to plot points, calculate the slope, and visualize the line on a canvas.
In coordinate geometry, whether for use in Java 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 Java,
whether for graphics, animations, or math-based programming.
Example: Finding the Line Equation Between Two Points | Maths Explanation for Java Kids
In Java, you can formulate line equation using two known points:
Given any 2 points on the Java 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 Java 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 Java 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 Java-ready straight line equation that you can use to animate objects or draw lines on a canvas.
Java Code Example - Animate Object Along a Straight Line
To animate a dot along a straight line in Java, we can increment the x-coordinate and compute the matching y-coordinate using the equation of the line.
Let's implement a Java animation algorithm with the above equation representing points (x1, y1) = (50, 50) and (x2, y2) = (100, 200).
Create a new Java project;
call it Dymetric.
Create 3 new Java classes; File, New.
Call them Facet, PanelsStraightLine and StraightLine.
Type out the adjoining Java code for animating an image body through the path of a straight line.
Summary: Visualizing Linear Equations in Java
The straight line equation is one of the first concepts students learn in senior secondary mathematics. In Java, we can easily plot a line by defining its slope (m) and intercept (c). This Java maths tutorial demonstrates how to compute the equation of a line given two points and visualize it using code.
Using Java to draw straight lines helps students understand the relationship
between slope and intercept in linear equations.
The simple Java code example provided demonstrates how to draw and animate a straight line in Java
using the slope-intercept equation. It's a fundamental concept in mathematical programming,
computer graphics, and Java animation.
This foundation helps you transition into more advanced Java graphics and animation projects.
So! Java Fun Practice Exercise - Animate in Straight Line
As a fun practice exercise, try modifying the Java code to explore different gradients and intercepts. This will be a great way to connect mathematics and programming, and help you understand more about Java animations and linear equations.
Java Straight Line Code - Main Class
public class Dymetric {
public static void main(String[] args) {
Facet lcd = new Facet();
lcd.setVisible(true);
}
}
Java Straight Line Window Setup - Facet Class
import java.awt.*;
import javax.swing.*;
/**
* This class just creates a display window to attach our canvas to.
*/
public class Facet extends JFrame {
public Container face;
public ButtonandCanvasPanels components;
public ImageIcon logo;
public Facet() {
// Give our window a title
super("A window that will hold a Canvas and Button");
// set window start points and dimensions
setSize(780,400);
// close the window when told to
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setResizable(true); // should this window be resizable?
// It'll be nice to have our own logo (feel free to use yours)
logo = new ImageIcon(getClass().getResource("studyingPays.png"));
this.setIconImage(logo.getImage());
face = this.getContentPane();
// background colour - may not be necessay since our canvas will have a colour of its own
face.setBackground(Color.PINK);
components = new ButtonandCanvasPanels();
// using the default layout manager
face.add(components.button_panel, BorderLayout.NORTH);
// attach appropriate drawing component
face.add(components.canvas_panel, BorderLayout.CENTER);
}
}
Java Straight Line Canvas and Button Controls Class
import java.awt.event.*;
import java.awt.*;
import javax.swing.*;
public class ButtonandCanvasPanels implements ActionListener {
public JPanel button_panel, canvas_panel;
public JButton motion_bttn;
public StraightLine motion;
public ButtonandCanvasPanels() {
button_panel = new JPanel();
// pick a background colour
button_panel.setBackground(Color.PINK);
button_panel.setLayout(new FlowLayout(FlowLayout.CENTER, 0, 0));
// O my; but for convenience sake let's add our control button here
motion_bttn = new JButton("Move");
motion_bttn.setBackground(new Color(255, 0, 255));
motion_bttn.addActionListener(this);
// using the default layout manager
button_panel.add(motion_bttn);
canvas_panel = new JPanel();
canvas_panel.setLayout(new BorderLayout());
motion = new StraightLine();
// attach appropriate drawing component
canvas_panel.add(motion, BorderLayout.CENTER);
}
/**
* Respond to the button click event
*/
public void actionPerformed(ActionEvent evt) {
motion.moveInLine();
}
}
Java Animation Code for Straight Line Class
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) {
}
}
}
}