Workshop › Wolfenstein-style 3D Maze › Step 11 of 18

The 3D view

What we are doing

Now the magic: the view is 60 degrees wide, split into 240 rays, one for every 2 pixels across. Each ray's wall is drawn as a column centered on the horizon, as tall as PROJECTION / dist: twice as far away, half as tall.

```js
const FOV = Math.PI / 3 // 60 degrees
const RAYS = 240 // one ray for every 2 pixels across
const COLUMN = canvas.width / RAYS
// How far the screen is from the eye, in pixels, so that the view is exactly FOV wide.
const PROJECTION = canvas.width / 2 / Math.tan(FOV / 2)

  for (let i = 0; i < RAYS; i++) {
    const angle = player.angle - FOV / 2 + (FOV * (i + 0.5)) / RAYS
    const hit = castRay(angle)
    const dist = hit.dist
    const h = Math.min(H * 3, PROJECTION / dist)
    ctx.fillStyle = '#94a3b8'
    ctx.fillRect(i * COLUMN, (H - h) / 2, COLUMN, h)
  }
```

What it means

• Ray i looks from the left edge of the view (angle - FOV / 2) towards the right, through the middle of its column.
• PROJECTION is how far the screen would be from the eye; a wall 1 tile tall at distance dist looks PROJECTION / dist pixels tall. That is perspective.
• Math.min(H * 3, ...) keeps a wall right in front of your nose from becoming huge.
• (H - h) / 2 centers the column on the horizon.

Your turn

1. Under MAP, write the four view constants and the comment.
2. In draw, between the floor and the minimap, write the column loop.

Skills: Drawing on a canvas, Velocity and gravity

← A ray: walk to the wall No fish-eye →

All steps

1. The map
2. The player
3. Ceiling, floor and a loop
4. Turn around
5. Walk
6. Is it a wall?
7. Stop at walls, slide along them
8. A ray: where it starts
9. A ray: the grid lines
10. A ray: walk to the wall
11. The 3D view
12. No fish-eye
13. Light and shade
14. A timer
15. Escape!
16. Best time
17. Touch controls
18. Build it yourself: run