I'm currently learning mathematics to be able to understand some parts of Computer Science books that I'm reading. It's like a mountain to climb before climbing the mountain you actually want to climb.

At the moment, I'm learning about lines and planes in space. And after this chapter of resolving equations to know if two lines intersect, I decided to build a small app in 3D to visualize the points and lines I'm working with. It would be a way of building something in 3D, and checking if my knowledge allow me to build an app to do the calculations I do on paper.

You can find this experiement here: Vectors in space.

The maths

That's where I hit a wall. I setup my basic app, draw the points, the lines, but when it was time to write the code for the intersection, I didn't knew what to do.

On paper I would usually end up with a system of equations like this one:

• 1 + 2k = x = 1 - 3l
• -2 +3k = y = -3 -4l
• -3 +5k = z = -2 -8l

I would then choose two equations, resolve them, and see if I come up with a solution. The problem is, how do I programmatically choose the two equations I want to resolve? How do I deal if I end up with a value of 0 and need to handle a division?

I didn't know because I lack some skills in this matter. So I went online to find a solution.

The solution

I ended up on Paul Bourke webiste, who wrote a solution to find the shortest line between two lines in 3d on his website.

I read the proposal, checked the implementation in C. It took me 4 hours of reading, re-reading, testing on paper, to understand what was going on, how it work and how to get the proper result.

The idea is that on each line, you must have two points. Let's say P1 and P2 for the first line and P3 and P4 on the second line. The points on each line that are the closest to the other lines are Pa and Pb respectivelly. The goal is to find those two points, and then check the distance between the two points. If the distance is 0 (or below a decided epsilon), the two lines intersect there.

I'll let you read the Paul Bourke solution, it's well explained. With some paper, and patience, you can understand it too.

Tech stack

I decided to not complicate myself too much, and use Three.js to handle the 3D webgl part. It has all the functions I need to handle points and be able to draw a line. I copied some code from their example, and kept it simple:

• Small yellow sphere for points
• Blue lines for the lines
• A flat grid to give some sort of landmark
• An origin point

For the rest, a simple React app with forms to allow me to add points, create lines, and check if two lines intersect with each other. I used react-hook-form for the forms, it's working well and I'm happy about it.

I used some IA to redo the style at the end, I didn't wanted to bother to do alignment and everything. It's supposed to stay a simple experiment.