Check if square intersects line in JavaScript

Question

Given the position and dimensions of a square, what is the equation in JavaScript for testing if a line goes through the rectangle?

What I have tried so far is:

function isSquareIntersectingLine(square, line) {
    return (
        line.startX >= square.topLeftX &&
        line.startX <= square.topLeftX + square.width &&
        line.endX >= square.topLeftX + square.width
    );
}

This works for if the dimensions are:

Square: {topLeftX: 0, topLeftY: 0, width: 5, height: 5}
Line: {startX: 2, startY: -4, endX: 6, endY: 3}

But if the dimensions are like this, it won't work:

Square: {topLeftX: 0, topLeftY: 0, width: 5, height: 5}
Line: {startX: 2, startY: -4, endX: 3, endY: 10}

What is the correct formula for checking if a line segment intersects a square in JavaScript?

Have you looked at this? stackoverflow.com/a/1968345/8526705 — Dacre Denny
– Dacre Denny, Commented Dec 24, 2018 at 1:42

MBo · Accepted Answer · 2018-12-24 07:11:40Z

2

Use Cohen-Sutherland clipping algorithm (or another line clipping one)

Get codes for both segments ends and check:

if both codes are zero, segment is inside (A-B case)
if code1 & code2 != 0 segment is outside  (K-L case)
if code1 & code2 = 0, analyze codes
    zero-nonzero: intersection exists (C-D)
    if code1 | code2 = 1100, 0011 : intersection exists (E-F)
         otherwise check for intersections with edges (GH)

edited Dec 24, 2018 at 7:11

answered Dec 24, 2018 at 3:08

MBo

80.7k5 gold badges61 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Check if square intersects line in JavaScript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related