How to achieve 2D shadows/the visibility effect with raycasting?

[Fililip]

So, before I begin my question, I want to say that I can't find any good tutorials that would explain how all the math behind 2D raycasting works and how it is implemented.

I want to achieve that 2D shadow effect which can be found here: http://ncase.me/sight-and-light/

Can someone explain how this guy did it and how this math works so that I can implement it myself?

Any help is appreciated!

[Arcade]

Is there something specific you didn't understand about that linked article? Right now it sort of sounds like you would like someone to rewrite the whole thing in a way that might be more understandable to you. That's something that would be hard to do concisely in a forum post. What specifically did you not understand?

If you search these forums you might find some posts that could be helpful to you, such as this one.

This question, though, is more about general game design techniques and not so much about SFML. You may get better answers on places like StackOverflow or other game development based forums.

[Fililip]

I did not understand the math behind this, as it was not well explained, and was (probably) meant for people experienced in vector maths/trigonometry/whatever that branch of math is.

For example, what is the "T" component and what is its purpose, and how is the "direction" component calculated? Is it just an angle in degrees/radians?
And also, what's the deal with all these equation transformations?

If you could find any beginner-friendly or just well explained tutorials, I would be grateful.

And about that post you gave me a link to, there is no explanation on how it's made. And that doesn't help me since I would like to understand the math behind it and implement it based on that knowledge.

[Arcade]

As mentioned, you may get better help on a different forum, but I'll see if I can help get you started. Note that I'm just inferring what each variable means based on what I saw while glancing through the article. Let's start with only the x component in the ray

Ray X = r_px+r_dx*T1

The first "ray" that the article creates is a line which begins at some starting point and goes to where the mouse cursor is. Therefore, we know what r_px and r_dx are. For example, let's say our light exists at (5, 6) and our mouse is at (12, 14). What the article calls distance is the vector from the mouse to the starting point, so (12-5, 14-6) = (7, 8 ). That gives us

x = 5 + 7 * T1
 

This formula lets us get any x value of our "ray" depending on what we plug in for T1. If T1=0, then x=5 which is our starting point. If T1=1, then x=12 which is our ending point. If T1=0.5 then x is in the middle of those two, 8.5. If T1 is greater than 1, then we're at a point beyond the mouse (which is allowed for rays, but segments do not extend beyond their ending point). The article then shows similar formulas for the Ray's y component, and the segment's x and y components.

The article then says that if a ray and a segment are intersecting, that means they both must have an X and Y component that matches each other. So setting the Ray's X formula equal to the segment's X formula (and likewise for the Y component) gives us

r_px+r_dx*T1 = s_px+s_dx*T2
r_py+r_dy*T1 = s_py+s_dy*T2

As explained above, you know what (r_px, r_py), (r_dx, r_dy), (s_px, s_py), and (s_dx, s_dy) are. The only thing you don't know is what T1 and T2 are. However, there should exist numbers we can plug in for T1 and T2 such that both sides of the equals sign are, well, equal to each other for both equations. That is what we're trying to solve.

The rest of the article is simple algebra to solve for those 2 numbers. Once you have T1 and T2, you can check if the numbers make sense for an intersection. If so, plug them back into your x and y formulas to see where exactly the ray and segment intersect.