Lesson 06

Vectors &
Linear Algebra.

Vectors are the language of space — they describe direction, magnitude, colour, velocity, and transformation. Linear algebra is the mathematics behind 3D graphics, machine learning, physics engines, and everything that moves on screen.

➡️
Vector

A quantity with both magnitude and direction. In 2D: (x, y). In 3D: (x, y, z). Think of it as an arrow in space.

📐
Scalar

A plain number — no direction. Multiplying a vector by a scalar stretches or shrinks it without changing its direction.

🔲
Matrix

A rectangular grid of numbers. Matrices represent transformations — rotation, scale, shear, projection — applied to vectors.

Why does this matter for code? Every pixel position, colour value (r, g, b), mouse coordinate, force in a physics simulation, and weight in a neural network is a vector. Understanding vectors means understanding how programs reason about space.

Notation & vocabulary

The symbols and terms you'll encounter across maths, physics, and shader code.

NotationNameMeaning
v = (3, 4)2D vectorAn arrow from the origin to the point (3, 4)
|v|Magnitude / lengthThe length of the arrow: √(x² + y²)
Unit vectorA vector of length 1 pointing in the same direction: v / |v|
a · bDot productScalar: a.x·b.x + a.y·b.y. Tells you how parallel two vectors are
a × bCross product3D only. Returns a new vector perpendicular to both a and b
M · vMatrix–vector multiplyApplies transformation M to vector v — rotation, scale, projection
lerp(a,b,t)Linear interpolationa + t·(b − a). Slides smoothly from a (t=0) to b (t=1)

Activity — Vector playground

Drag the sliders to change vectors A and B. Watch the sum, dot product, and angle update live.

Vector Addition & Dot Product
Drag sliders · all values computed in real time
A · x A · y
B · x B · y

Core operations

The building blocks used in graphics, physics, and machine learning.

Addition
a + b = (ax+bx, ay+by)

Combine two displacements. Moving 3 right then 2 right = 5 right. Used for velocity + position updates every frame.

Scalar multiplication
s · v = (s·vx, s·vy)

Stretch or shrink a vector. Multiplying velocity by 0.98 each frame creates drag. Negative s flips direction.

Dot product
a · b = ax·bx + ay·by

Returns a scalar. If a·b = 0, vectors are perpendicular. If > 0, they point roughly the same way. Used in lighting calculations.

Normalise
v̂ = v / |v|

Strip magnitude, keep direction. Essential before computing angles or projections — ensures consistent behaviour regardless of vector length.

Cross product (3D)
a × b = ⊥ to both

Returns a vector perpendicular to both inputs. Used to compute surface normals in 3D graphics, which tells the GPU which way a face is pointing.

Linear interpolation
lerp(a,b,t) = a+t(b−a)

Smoothly blend between two values. t=0 → a, t=1 → b, t=0.5 → midpoint. Used everywhere: animation, colour mixing, camera movement.

Activity — Matrix rotation

A 2×2 rotation matrix transforms every point of a shape. Drag the slider to see it live.

Rotation Matrix
R(θ) · v = (v.x·cos θ − v.y·sin θ, v.x·sin θ + v.y·cos θ)
Angle θ
Scale 1.00×

Where vectors show up in code

Linear algebra is everywhere in creative and technical computing.

🎮
Game physicsEvery game object has a position vector and a velocity vector. Each frame: position = position + velocity. Gravity is just adding (0, −9.8) to velocity every second.
💡
3D lighting (shaders)The brightness of a surface = dot(surfaceNormal, lightDirection). If the normal points straight at the light (parallel), dot = 1 → full brightness. Perpendicular → dot = 0 → dark.
🎨
Colour mixingRGB colours are 3D vectors: (r, g, b). Lerp between two colours for smooth gradients. Multiply component-wise for colour tinting. Add vectors for light blending.
🧠
Machine learningEvery training example is a vector of features. A neural network layer multiplies an input vector by a weight matrix — that's just linear algebra, thousands of times per second.
📷
Camera & projectionA 4×4 matrix transforms 3D world coordinates into 2D screen coordinates. The MVP matrix (Model · View · Projection) is the chain of three such transformations in every 3D renderer.