# 2D Raycasting in JavaScript

## Here we will be using a JavaScript library called p5.js to simulate raycasting in JavaScript.

Raycasting is made up of two parts in total. A ray that will be pointing in a direction and a Wall that the ray will be pointing to. So following that logic we’ll want to have two objects for our raycaster. A class of Ray and a class of Wall. If we can prove that a certain ray is pointing to a wall then we should be able to calculate the line to the wall and create a raycaster that will show what is visible

Using p5.js, we have access to a few new methods that simplify this whole process for us, such as createVector() which allows us to create a vector path between two points by passing in an x, y, and z coordinate. If you _do_ want a detailed vanilla javascript tutorial I would recommend THIS 2d visibility guide from Red Blob Games. There’s also a really good video on this subject that I used as my primary resource by Daniel Shiffman here.

Starting we will create two classes that will be dedicated to our two objects within the scene. These will be labeled Ray and Boundary. We will separate these between two files, we’ll also have a third file which will be labeled sketch. This is going to host the bulk of our application and will be where we will have each of our classes interacting with each other and hold our setup() and draw() functions.

Our Boundary constructor will simply take in 4 arguments for x1,y1,x2,y2. These points will point to the first and second points of each line that we create. We will then store these vectors in two variables a and b with createVector(). Afterward, we will use show() to display/draw the vector.

We now want to cast the ray onto a boundary and have it stop. To do this, we have to calculate the intersection of a line and then cast a “light” outwards until it intersects with that wall. It’ll take in a position and an angle in this case as we’re going to end up attaching this to a point, which we’ll label particle so that we can move this around the map.

Within the cast method, we are creating we will be feeding in an array of the boundaries that will be created on our canvas. With the information of the walls, we’ll be calculating where the line of the boundary and the ray intersect using this formula =>

We first create a constant for the denominator and then create constants for the value given by the division of T and U by the denominator. We also create a check for when T is greater than 0 and less than 1 and U is greater than 0. If these checks are passed then we go ahead and return points x and y of the intersection by creating a vector and setting the x any y’s of that vector to the sum of x1+t(x2 — x1) and y1+t(y2 — y1) each respectively. If the check is not passed then it means that the lines are parallel and will never intersect given an infinite scale.