Straight Line Region in JavaScript | Detect When an Object Crosses a Line

Detecting Regions Divided by a Diagonal Line | Maths Explanation for JavaScript Kids

In this tutorial, you'll learn how to detect when an object crosses a straight line in JavaScript. We'll explore how to check which side of a line a point lies on, and how to apply this logic to a JavaScript canvas animation.

When working with graphics or simulations in JavaScript, you might need to check which side of a line a ball or object is on. This technique is common in JavaScript canvas collision detection and helps define regions divided by a line.

Consider a moving body (circle). When it moves across a diagonal straight line, we can perform an action - such as changing the ball's colour - after it crosses from one region to another.

Figure: JavaScript diagram showing object crossing a straight line region

Understanding the Straight Line Equation in JavaScript

We use the slope-intercept formula (y = mx + c) to define boundaries for region detection in JavaScript.

To implement straight line region detection, we'll compare the ball's x-position with the position of the line at the same y-coordinate, using the line equation in JavaScript.
If the ball's midpoint is (x_b, y_b) and the line at that height is (x_l, y_l), then:
x_l = my_d + c
The ball crosses the line when: x_d >= x_l.

Figure: JavaScript straight line region diagram showing object coordinates for line detection

This logic uses the line equation in JavaScript to check when an object moves from one region to another.
This can also help with collision detection and boundary demarcation in JavaScript graphics or HTML canvas.

JavaScript Code: Detecting Line Crossing in Canvas

To determine which side of a diagonal boundary a point belongs to, we use a simple line equation. This JavaScript example demonstrates line region detection using the slope-intercept method.

Create a new file; On Notepad++: File, New.
Call it straight_line_region.html.
Type out the adjoining JavaScript code for detecting the instance a travelling body crosses the path of a straight line.
This JavaScript line crossing detection example changes the ball's colour once it moves across the line.

Summary: Detecting Line Boundaries with JavaScript

You've learned how to use the line equation in JavaScript to **detect regions divided by a straight line and trigger actions when objects cross the line**. This simple logic forms the foundation of JavaScript graphics and animation algorithms.

By now, you can use JavaScript to detect when an object crosses a straight line and determine which region it belongs to. This simple mathematical approach is useful for animations, physics simulations, and canvas line region detection.

Applying the Line Region Detection Logic in JavaScript

This tutorial teaches you to:

Detect when a ball crosses a straight or diagonal line.
Identify which side of a line a point lies on.
Create interactive JavaScript canvas projects with region-based logic.

You can extend this principle to handle collision detection, line-segment intersection, or more complex 2D graphics region detection.

So! JavaScript Fun Practice Exercise - Detect Straight Line Boundary

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

JavaScript Animation Code for straight_line_region.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Diagonal Region</title>
    </head>
    <body>

        <h3>Detect when a Body crosses a Diagonal Line</h3>

        <canvas id="line_region" width="600" height="300" style="border: 1px solid #000000;">
            Your browser (version) does not support canvas object; Time to update!
        </canvas>
        <button onclick="doGlide()">Glide</button>
        <button onclick="clearTimeout(clr_obj)">Stop</button>

        <script>
            var canvas = document.getElementById("line_region");
            var context = canvas.getContext("2d");
            context.fillStyle = "#888888"; // color for our moving body(circle)

            // coordinates for the ball(circle)
            var x_ball = 50;
            var y_ball = 150;
            var radius = 40;
            // draw the circle
            context.beginPath();
            context.arc(x_ball, y_ball, radius, 0,  2 * Math.PI);
            context.fill();

            //draw diagonal line
            context.moveTo(300, 290);
            context.lineTo(400, 10);
            context.stroke();

            var x1 = 300;
            var x2 = 400;
            var y1 = 290;
            var y2 = 10;
            var m = (y2 - y1) / (x2 - x1); // slope
            var c = (x2 * y1 - x1 * y2) / (x2 - x1); // y-intercept
            // x-coordinate for diagonal line
            var x_line = (y_ball - c) / m;

            var clr_obj;
            function doGlide() {
                // condition for continuing motion
                if (x_ball <= 540) {
                    context.clearRect(x_ball - radius - 10, y_ball - radius, 80, 80); // erase previous circle
                    if (x_ball >= x_line) {
                        context.fillStyle = "#00ff00"; // color for our moving body(circle)
                    }
                    // redraw circle
                    context.beginPath();
                    context.arc(x_ball, y_ball, 40, 0, 2 * Math.PI);
                    context.fill();

                    x_ball += 10;
                    clr_obj = setTimeout(function () { doGlide(); }, 100);
                }
            }
        </script>

    </body>
</html>

I have a better version / See other versions.