Segment intersection formula explained

I teach you how to find the intersection point of two segments (if it exists). We study the mathematics and implement visualizations to understand what the math is actually doing. We first learn how to detect the intersection of lines and then check to see if the intersection point is within the segment borders.

To figure out the segment intersection we use linear interpolation (lerp). We essentially try to find the offset values for each segment where the coordinates are the same by solving a system of equations.

You will learn how to code a JavaScript function that gets the intersection point of two segments or returns null if it doesn't exist. We will test this function in many situations and become confident that it works.

Finding the intersection of two segments is a fundamental tool in solving many problems. For example, in the self-driving car project, we use it to make the sensors work and to detect collisions.

⭐️SELF-DRIVING CAR COURSE PLAYLIST⭐️

⭐️A MORE MATHEMATICAL PROOF⭐️

⭐️ TABLE OF CONTENT ️⭐️
0:00 Intro
1:15 Project setup
4:17 Visualizing the segments
8:07 Linear interpolation
14:31 Get intersection function
21:37 Extensive testing
25:47 Visual debugging
30:30 Checking if intersection point is within bounds

[cesarmoltoni]

Amazing tutorial Dr Radu, I have made a little change breaking "getIntersection" into two functions and interchanging arguments:
function getIntersection(A, B, C, D) {
const t = calculateOffsets(A, B, C, D)
const u = calculateOffsets(C, D, A, B)
if (t && u) {
return {
x: lerp(A.x, B.x, t),
y: lerp(A.y, B.y, t),
offset: t
}
}
return null
}

function calculateOffsets(A, B, C, D) {
const top = (D.y - C.y) * (A.x - C.x) - (D.x - C.x) * (A.y - C.y)
const bottom = (D.x - C.x) * (B.y - A.y) - (D.y - C.y) * (B.x - A.x)
if (bottom != 0.0) {
const offset = top / bottom
if (offset >= 0 && offset <= 1) {
return offset
}
}
return null
}

[yandra_dev]

I simply can't explain how much I love this guy, one of the best teachers I ever had.

[williamikennanwosu]

You lay things out clearly, explain things well and code at a pace that is easy to follow along. Top notch teaching Radu 💯!

[crypticmeow]

One of the best tutor for learning maths and coding.

[redundantqwail]

After trying a number of methods, I'd determined line segment collision detection to be an integral part of an effective way to determine A) if a sprites projected path is going to be intersecting a block B) which side of the block and therefore how to respond to it. I've looked at a number of resources that give similar equations with little explanation of beyond what the components are. I hate using math I don't understand in my projects, so the in depth explanation given here was a godsend. Keep producing awesome content!

[Eternam]

a master class, thank you very much Radu, waiting for the next one.

[amitlavian]

Great stuff :) I really like the approach of visualizing things to make the explanations clearer

[awekeningbro]

i really love this sort of coding, which involves maths! It makes the problem so much more engaging and challenging!

[eugeniogonzato]

You opened my mind in a way that nobody did before, thanks.

[lukasaudir]

Radu is a super teacher!!

Teaching the intuition and logic behind more complex topics, by simply breaking down the complex into smaller simple pieces is a brilliant way to teach, and surely the lesson will stick with the student forever,

I'm glad that people like you exist and are willing to share that knowledge,

Thank you Radu!!

[nurbekss]

Dude, you have to become a prof.You are such genious of explaining the complex things in the easiest way.Thank you sir.

[___dp]

Great linear interpolation related video! I hope my English level could be good enough to be able to express gratitude for your videos. The creative way in which you explain, the program you develop to exemplify what is being explained in an entertaining way, the editing... all the time spent in front of the camera and off it, has great value to me. All your students should be proud to have such a great teacher!

[daiyaanmuhammad]

Wow! Didn't even realize I actually watched a half hour content without skipping anything. Awesome explainations man. You've earned a sub.

[antonioguilherme]

thank you teacher. I'm Brazilian, I was looking for some content about collision between line segments, but I couldn't find it, you saved me.

[ScriptRaccoon]

This is a really good and pictorial explanation! As a mathematician I would have explained it quite differently, but probably you are right that this scares people away :D

[hri]

literally the only explanation i can find for the hardest part of raycasting

[unknown-bxmy]

Very useful!
Right now, i know how to use this function in all cases as i need after understanding it. Thank you.

[bawbak]

Thank you sir, I really appreciate that you explained it in a programming way and not in the math way. 🙏
You have no idea how many videos I've watched to understand this topic, but because all of them explained it with the math language, I couldn't comprehend it at all and it just frustrated me

[josephsam]

Thank you very much for your tutorials.

[bloppai]

Brilliant explanation, thank you so much!