2D raycasting.

(dinging)

So, what you're about to watch

is an edited version of what I did

on last week's live stream.

This is the result of the example that I made,

but before I get started with the coding,

let me talk to you a little bit

about where I got this idea.

So, a lot of people shared with me

a recent YouTube video from Sebastian Lague

about the 2D raymarhing algorithm.

This is part of his coding adventure series.

The video's really wonderful,

and goes through the basic 2D algorithm

and gets into also some crazy 3D rendering stuff.

So, I want to explore that algorithm in a later video,

but I wanted to start with something simpler,

and I looked back and Brenda Dowd, back in 2016,

posted a suggestion for me to do 2D raycasting.

So, about 3 years later, I'm getting to it.

So, I've been looking for inspiration

and I found inspiration

in one of my favorite internet artists,

indie game creator, Nicky Case.

So, Nicky Case made a game called Nothing To Hide,

and also an accompanying explorable explantation

that describes the process of creating

this really beautiful 2D shadow effect in the game.

So, I encourage you to check out Nicky Case's work,

all of their explorable explanations,

but in particular, down the middle of this page

is an example of exactly, basically, what I tried to make

in the coding challenge.

There's also, from Red Blob Games, Amit Patel.

A wonderful interactive essay,

explorable explanation, again, if you will

of a 2D visibility, and there's a source code

and a variety of different languages

and a whole bunch of interactive demos.

So, this is what I wanted to make.

I kind of got there.

There's so much further it could be taken

by you, the viewer, and I hope you make

your own creative version of this

and share it with me at TheCodingTrain.com

So, I hope you enjoy this coding challenge.

(train whistling)

Let's get started with, actually, the coding of this.

In JavaScript, using the p5.js library.

So, let me map out what I think I need, first.

So, what I want to have,

is I want to have two classes

where I can make two kinds of objects in my world.

I want to have a boundary.

This idea of a boundary,

and the boundary really just is line segments

between two points, A and B, or start and end,

however I want to consider that.

Then, I also want to have an idea of a ray,

and a ray has a position, and then maybe a direction.

So, presumably, if this was the ray

at this position, with this direction,

I need a function to tell me,

where does this ray hit the boundary.

So, two questions:

One, does it hit the boundary?

Yes

or no.

If it does hit the boundary,

give me that point.

If no, then just say no.

So, this is what I need to do.

If I can create this basic ray class, a boundary class,

I can have every ray find its point on the boundary.

Then all of those things that I just showed you

I should be able to create.

I want to mention one other reason why I'm doing this,

and it might take me a while to get to this,

but in a future video, what I intend to use this for,

is also if I have a vehicle,

I want to use this in an A.I. application.

If I have a vehicle

that's trying to drive along some type of path,

if I can give it sensors, which are like rays

that allow it to see out from in front of it,

the readings of those sensors,

where those sensors, how far they are

from the path's boundary could be inputs

into a neural network that would then determine

which direction the vehicle should turn.

So, this is where I'm also going with this, eventually.

But right now, in this video, I just want this ray

and this segment.

Here I am with the code.

So, I have three JavaScript files.

I have sketch.js with my, sort of, meme stuff in it

set up in Draw.

I have ray.js, where I want to create a ray class,

and boundary.js, where I want to create my boundary class.

So, let's do the boundary first.

Class boundary,

and then I need a constructor.

And basically, I want two points.

A

equals createVector

and

B equals createVector.

So, this is the idea of the boundary.

I have two points.

I could have them be separate variables.

This.x1,

this.y1,

this.x2,

this.y2,

but I'm going to use A and B.

Oh, but wait!

Yeah, as vectors.

So, A and B each get their own X and Y.

Ha, okay.

But maybe what I'll do is I'll initialize it

with four arguments, which are the raw coordinate values.

I might regret this later, but let's see what happens here.

Then, let me write a function just to draw it.

So, if were to draw it,

all I want to do is say draw line

from a.x, a.y, to b.x, b.y,

and say stroke 255, okay.

This is good.

So, this is when things just work out so specifically.

So now, in sketch, I'm going to say,

let's start with just one boundary.

I'm going to call it B,

and I'm going to say createCanvas

400,

400,

and B is a new boundary

between, I don't know,

300,

300,

300.

No, 300, 100,

300,

300,

and then

background

zero

and b.show.

Okay.

Alrighty.

Alrighty, alrighty, alrighty.

(comical music)

You'd think by now I wouldn't have this problem.

This comes from 15 years of programming in Java

before JavaScript, wasn't that many years, maybe 10?

There we go, look!

Yay, I have a boundary!

(trumpets blaring)

Now, let's make the ray class.

So, I'm going to say class ray,

and, oh, there's so many ways I could do this.

I definitely need a constructor,

and I want a position,

which is going to be a createVector,

and this a little bit.

This is a little bit silly, because ultimately,

what is a ray

but a vector?

What I'm saying, though, is that for my purposes,

I want the ray to be a vector that emminates

from a particular location.

So, instead of just using P5 vector directly,

I'm going to make my own ray class, which wraps a P5 vector

with a P5 vector, that's position.

So, the ray will be initialized at an X, Y location,

and then its direction,

I'm just going to hard code that right now.

CreateVector

zero comma one, and then what I'm going to do

is write a draw function

and I will say

same thing, stroke 255.

Let's translate to the position, that'll make things easier.

Translate to this.pos, I didn't forget this time.

This.pos.y, and then draw a line from zero, zero

to direction.x, direction.y,

and

pop.

Maybe what I'll also do.

So.

If I make the vector that size, it's going to be

one pixel of length, which means draw,

which is fine for just knowing the direction.

It's a unit vector, but for drawing it, it's kind of tiny.

So, I don't know, this is very silly,

but I'm just going to multiply it by 10

just so I can sort of see it

right here.

There's other more thoughtful ways I could do this,

but this will work.

All right, let's go here.

Oh, now I need to make a ray.

So, now I'm going to say let R.

Let's call this bound, let's call this ray.

Let's call this wall, let's call that ray.

So, wall is a new boundary, wall.show.

Ray is a new ray, and I will put this at,

you're going to be surprised about this location.

(laughing)

100,

200,

100, 200, and then I'm going to say ray.show.

Okay,

ah!

Dir is not defined.

This dot, this dot, I was so close

to not forgetting my this dots.

Oh, what?

No!

(coughing)

Oh yeah, I want to point it to the right.

So, there we go.

X is the first component.

Yes, okay, look at this!

Oh, have I set myself up for an exciting situation or what?

So, if all goes according to plan,

all I need to do now is write a function

that says

ray

dot check

wall.

Ray.checkWall, that function should either return maybe null

or undefined if it doesn't intersect,

or the point at which it intersects if it does intersect.

In other words, I want to say let pt for point

equal ray.intersect

or cast.

Let's call it cast against the wall, I know it's weird,

and then if point exists, let's draw a point

at point.x, point.y.

We'll make this white and maybe we'll make it,

actually, an ellipse.

So, this is the idea.

I have a wall, I have a ray,

and I'm going to cast the ray towards the wall,

and if I get a point back, I'm going to draw it.

So, in the ray class,

I'm going to write a function called cast,

and it's going to receive a boundary, or I can call it wall.

In order to do this, I need math.

Right, I need to learn about how do I determine if a line

and another line are intersecting,

and what's that point of intersection?

There is a library, I'm being told from the chat,

called p5.collide2D

that offers a lot of functionality

for these types of geometry operations.

Line-line intersection.

You know, line-circle intersection.

Circle-rectangle intersection.

So, I could go and use that library

and maybe it might be useful to do that

and I'll come back to that at the end of this video.

I am, however, going to enjoy looking at a Wikipedia page

called line-line intersection and finding the formula

that I can use to apply to do this math myself in the code.

So, one thing I want to emphasize

is that I mentioned there's actually two steps.

The first step is just to determine

if it's even intersecting at all.

Is it intersecting the line segment or no?

And only if it is, then find that point.