Raycasting - weird lines on walls when ray is facing up or right

Question

I am trying to make a raycasting game. Everything is rendered correctly except when the ray is facing up (angle > PI) or facing right(angle > 0.5PI and < 1.5PI) lines are drawn on walls. I am not sure what is causing it to happen but I know that the lines are not affected by the rotation of the player only by the players position. I also tried rounding the rays position but that did not help.

Right and up ray walls.

The walls up close.

Left and down ray walls.

Code:

        let rayX, rayY, rayAngle, rayDeltaX, rayDeltaY

        for (let i = 0; i < this.screen.width; i ++) {
            rayAngle = this.angle - this.fov / 2 + i * (this.fov / this.screen.width)
            
            if (rayAngle < 0) {
                rayAngle += Math.PI * 2
            }
            else if (rayAngle > Math.PI * 2) {
                rayAngle -= Math.PI * 2
            }

            rayX = this.x
            rayY = this.y

            let stepY

            if (rayAngle > Math.PI) {
                stepY = -this.tileSize
                rayY = Math.floor(rayY / this.tileSize) * this.tileSize - 1
            }
            else {
                stepY = this.tileSize
                rayY = Math.floor(rayY / this.tileSize) * this.tileSize + this.tileSize
            }

            rayX = this.x  + (rayY - this.y) / Math.tan(rayAngle)
         
            rayDeltaY = stepY
            rayDeltaX = stepY / Math.tan(rayAngle)

            while(true) {
                if (this.Map.map[Math.floor(rayY / this.tileSize) * this.Map.width + Math.floor(rayX / this.tileSize)] == '#') {
                    break
                }

                rayX += rayDeltaX
                rayY += rayDeltaY
            }

            let rayHorizontalX = rayX
            let rayHorizontalY = rayY
            let rayDistanceHorizontal = Math.sqrt((this.x - rayHorizontalX) ** 2 + (this.y - rayHorizontalY) ** 2)

            rayX = this.x
            rayY = this.y

            let stepX

            if (rayAngle > 0.5 * Math.PI && rayAngle < 1.5 * Math.PI) {
                stepX = -this.tileSize
                rayX = Math.floor(rayX / this.tileSize) * this.tileSize - 1
            }
            else {
                stepX = this.tileSize
                rayX = Math.floor(rayX / this.tileSize) * this.tileSize + this.tileSize
            }

            rayY = this.y + (rayX - this.x) * Math.tan(rayAngle)
    
            rayDeltaY = stepX * Math.tan(rayAngle)
            rayDeltaX = stepX

            while(true) {
                if (this.Map.map[Math.floor(rayY / this.tileSize) * this.Map.width + Math.floor(rayX / this.tileSize)] == '#') {
                    break
                }
    
                rayX += rayDeltaX
                rayY += rayDeltaY
            }
            
            let rayVerticalX = rayX
            let rayVerticalY = rayY
            let rayDistanceVertical = Math.sqrt((this.x - rayVerticalX) ** 2 + (this.y - rayVerticalY) ** 2)
            
            let rayFinalDistance

            if (rayDistanceHorizontal < rayDistanceVertical) {
                rayFinalDistance = rayDistanceHorizontal
                ctx.fillStyle = 'darkblue'
            }
            else {
                rayFinalDistance = rayDistanceVertical
                ctx.fillStyle = 'blue'
            }

            let rayCorrectedDistance = rayFinalDistance * Math.cos(rayAngle - this.angle)

            let lineHeight = this.tileSize * (this.screen.width / 2 / Math.tan(this.fov / 2)) / rayCorrectedDistance
            let lineBottom = this.projectionPlane.centerY + lineHeight * 0.5
            let lineTop = this.projectionPlane.height - lineBottom

            ctx.fillRect(i, lineTop, 1, lineHeight)
        }

Any help would be appreciated.

Answer 1

I fixed the problem. When the ray was facing up or right I was substracting 1 from the rounded position of the ray to get the first intersection. Substracting a smaller number like 0.001 fixed it.