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

Light and shade

What we are doing

Every wall is the same gray, so corners vanish. Each kind of wall gets its own color; walls hit on their top or bottom face are darker, and everything fades with distance. That's enough to make the maze look solid.

```js
const COLORS = { '#': [148, 163, 184], 2: [185, 90, 60], E: [34, 197, 94] }

function shade(hit, dist) {
  // Walls facing north or south are a little darker, and everything fades with distance.
  const light = (hit.side === 'y' ? 0.7 : 1) * Math.max(0.25, 1 - dist / 12)
  const [r, g, b] = COLORS[hit.tile]
  return 'rgb(' + Math.round(r * light) + ', ' + Math.round(g * light) + ', ' + Math.round(b * light) + ')'
}

    ctx.fillStyle = shade(hit, dist)
```

What it means

• COLORS gives each wall kind its red, green and blue.
• light is 1 for a near wall hit on its side face; 0.7 times that on its top or bottom face; it drops with distance but never below 0.25.
• The color is built as a text like 'rgb(105, 115, 130)'.

Your turn

1. Above FOV, write COLORS.
2. Above draw, write shade.
3. In the column loop, use shade(hit, dist) as the color.

Skills: Drawing on a canvas

← No fish-eye A timer →

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