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. A Cross-Multiplication as know as Rule of Three can be used for it. This rule can be applied with this formula below:

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: Game Cycle
• Previous: Basic Attributes