Chapter 01 · Vectors & Dot Product

Two numbers,
one arrow.

Every position, every velocity, every "which way is the enemy looking" in every game ever shipped is a vector. It's just two numbers drawn as an arrow — and the only math you need to unlock it is the Pythagoras you already know.

press play — 90 seconds ↓
▶ watch rgbguy's original — Math in daily life ⚡️
The lesson · a 90-second movie you can touch

Press play. It explains itself.

Plays like the video — one caption at a time, the picture animating under it — and it pauses when it's your turn to drag something. Skip around with the dots or arrow keys. The full lab comes after.

skip the lesson ↓
90 seconds · it pauses when it's your turn
Step 1 · Meet the arrow

What even is a vector?

An arrow is just two numbers: how far across (x) and how far up (y). That's it. And because those two legs make a right triangle, the arrow's length comes free — it's Pythagoras, the one formula school actually made you memorize. Drag the tip and watch the triangle do the work.

drag the arrow tip →
v = (3.0, 2.0)
length: |v| = √(x² + y²)
|v| = √(3.0² + 2.0²) = 3.61
angle = atan2(y, x) = 34°

Show

One arrow can mean:
position — "the chest is at (3,2)"
velocity — "move (3,2) per second"
direction — "the guard faces (3,2)"
Step 2 · Combine them

Adding arrows = walking twice

Walk along a, then walk along b — where do you end up? That's a + b, and the math is embarrassingly easy: add the x's, add the y's, done. Subtraction is the same trick: a − b is just "walk a, then walk b backwards". Drag both tips, flip the sign, watch the ghost.

drag a and b

Operation

a = (3.0, 2.0)
b = (1.0, −4.0)
a + b = (3.0+1.0, 2.0+(−4.0))
= (4.0, −2.0)
component-wise. that's the whole rule.
Step 3 · The one weird multiply

The dot product disc

Multiply the x's, multiply the y's, add them up. One number falls out — and that number is a "same direction?" meter. Point B with A and it reads +1. Perpendicular? 0. Dead against A? −1. The disc shows the whole story: everything in the green half of A's world is "in front", the red half is "behind" — and the halves rotate with A. Drag both arrows.

Dot Product
0.80
Angle: 37°
drag A (yellow) and B (blue)
the recipe:
a·b = aₓ·bₓ + aᵧ·bᵧ
= 2.1·1.3 + 0.8·2.0 = 4.33
same number, other costume:
a·b = |a||b|·cos(θ)
= 2.2·2.4·cos(37°) = 4.33 ✓
normalized: â·b̂ = cos(θ) = 0.80
cheat sheet:
+1 → same direction
 0 → perpendicular
−1 → opposite
Step 4 · Ship it in a game

Game application: the guard's eyes

This is the dot product's day job. The guard has a facing direction and a field of view. Take the direction to the player, normalize it, dot it with the guard's facing — if the result beats cos(fov/2) and the player is in range, you're spotted. Every stealth game you've ever played runs this exact two-line test. Drag the player. Try to stay alive.

drag the player dot (and the facing handle)

Guard

· hidden
the test, live:
dot = 0.87 > cos(35°) = 0.82
dist = 143 < 220
spotted = both checks pass
the actual enemy-AI code:
if dot(facinĝ, toPlayer̂)
   > cos(fov/2)
and dist < range: spotted()
Step 5 · Spot it in the wild
where the dot product clocks in, daily —
  • Every lit pixel. Brightness = N·L — surface normal dotted with the light direction, once per pixel, millions of times a frame. That's chapter 04.
  • Audio & UI. Is the explosion to your left or right? Dot with the camera's right vector → stereo pan. Minimap arrows? Dot products deciding "in front or behind".
  • Recommendation engines. "Users like you" is cosine similarity — the normalized dot product of two taste vectors. Same meter, thousand-dimensional arrows.
See it in 3D · orbit it like Blender

The guard's eyes, in real 3D

The stealth test from this chapter, exactly as a game runs it: the guard's facing (yellow arrow) dotted against to-player (cyan arrow). When the dot beats cos(fov/2) and the range check passes, the cone goes red. Widen the FOV and watch hiding get harder.

drag to orbit · scroll to zoom

Vision

60°
spotted = dot(F̂, T̂) > cos(fov/2) && dist < range
dot = 0.00
The source · rgbguy's original

Watch the video, jump by section

Click any moment on the right — it takes you straight there (in place when this site is served over http, on YouTube when opened as a local file).