Utilities

Utils

To create the RayCasting logic we will use some trigonometry functions like Math.sin and Math.cos. These functions works with radian values, not degrees. We are using degree values in the attributes so, the first thing to do is to create a function that converts degree values to radian values. We can use the formula below for this:

Formula: degree * π / 180

With the formula as base, we will create the function:

/**
 * Cast degree to radian
 * @param {Number} degree 
 */
function degreeToRadians(degree) {
    let pi = Math.PI;
    return degree * pi / 180;
}

As mencionated, the way to draw the projection uses lines in the canvas. To simplify our job, we will create other function just to draw the lines in the canvas, instead of coding a canvas draw function for every line to make.

/**
 * Draw line into screen
 * @param {Number} x1 
 * @param {Number} y1 
 * @param {Number} x2 
 * @param {Number} y2 
 * @param {String} cssColor 
 */
function drawLine(x1, y1, x2, y2, cssColor) {
    screenContext.strokeStyle = cssColor;
    screenContext.beginPath();
    screenContext.moveTo(x1, y1);
    screenContext.lineTo(x2, y2);
    screenContext.stroke();
}

Now, we have everything we need to start the RayCasting logic.

• Next: RayCasting
• Previous: Game Cycle