Animating along a Straight Line in Java - Slope, Intercept, and Line Equation
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:
Figure: Java straight line graph coordinates for linear equation y = mx + c
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
package dymetric;
public class Dymetric {
public static void main(String[] args) {
Facet lcd = new Facet();
lcd.setVisible(true);
}
}
Java Straight Line Window Setup - Facet Class
package dymetric;
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
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 voidactionPerformed(ActionEvent evt) { motion.moveInLine();
}
}
Java Animation Code for Straight Line Class
package dymetric;
import java.awt.*;
public class StraightLine extends Canvas {
protected Color ball_colour; protected intx1 = 50; protected intx2 = 800; protected inty1 = 50; protected inty2 = 300; protected intx = x1; protected inty = y1; protected doublem, c; // slope and y-intercept of a straight line protected final intaWIDTH, aHEIGHT;
public StraightLine() {
setBackground(Color.LIGHT_GRAY); // canvas color ball_colour = Color.RED; aWIDTH = aHEIGHT = 10;
// Feel free to double buffer if flickering occurs public voidpaint(Graphics g) {
g.setColor(ball_colour); // draw a dot
g.fillOval(x, y, aWIDTH, aHEIGHT);
}
public voidmoveInLine() { // 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) {
}
}
}
}