Vector Operations

Drag two vectors around a grid and watch their sum, difference, magnitude, dot product and cross product update live.

Beginner

Snap to whole numbers

a = (4, 1)

|a| = √(4² + 1²) = 4.12

b = (1, 3)

|b| = √(1² + 3²) = 3.16

Dot product

a · b = 4×1 + 1×3 = 7

cos θ = 7 / (4.12×3.16) = 0.54

θ = 57.53°

projection of a on b = (0.7, 2.1), length 2.21

a · b > 0: the angle is acute and the projection (green) points the same way as b.

Drag the white handles at the tips of a and b.

Understanding vector operations

A vector has a magnitude (length) and a direction. In 2D we write it with components, a = (a_x, a_y), and draw it as an arrow from the origin.

Addition works component by component. Geometrically, put the tail of b on the tip of a; the sum runs from the start of a to the end of b, the diagonal of the parallelogram the two vectors span.
Subtraction a − b is the vector you add to b to reach a, so it points from the tip of b to the tip of a.
The dot product a · b is a number. It equals |a||b| cos θ, so it measures how much the vectors point the same way. Dividing by |b| gives the length of the shadow (projection) of a on b.
The cross product is defined for 3D vectors. For two vectors in the xy-plane it points straight along the z-axis, and its z-component a_xb_y − a_yb_x is the signed area of the parallelogram spanned by a and b. The sign tells you the turning direction from a to b.

Key formulas

Magnitude

|a| = √(a_x² + a_y²)

Sum and difference

a ± b = (a_x ± b_x, a_y ± b_y)

Dot product and angle

a · b = a_xb_x + a_yb_y = |a||b| cos θ

θ = arccos( a · b / (|a||b|) )

Projection of a onto b

proj_b a = (a · b / |b|²) b

a · b / |b|: scalar projection (signed length of the shadow)
proj: vector projection, along b

Cross product (vectors in the xy-plane)

a × b = (0, 0, a_xb_y − a_yb_x), |a × b| = |a||b| sin θ

z: signed area of the parallelogram spanned by a and b
z > 0: b is counter-clockwise from a (right-hand rule: out of the screen)

What the sign of the dot product tells you

Dot product	Angle	Meaning
a · b > 0	0° ≤ θ < 90°	Vectors point broadly the same way
a · b = 0	θ = 90°	Vectors are perpendicular (orthogonal)
a · b < 0	90° < θ ≤ 180°	Vectors point broadly in opposite directions

Order matters for the cross product

The dot product is symmetric (a · b = b · a) but the cross product is not: b × a = −(a × b). Swap the vectors in the visualizer and the parallelogram changes colour.

How to use this visualizer

1
Drag the white handles at the tips of a (blue) and b (red). Untick “Snap to whole numbers” for finer positions.
2
Pick Sum or Difference to see the tip-to-tail construction and the resulting vector in violet.
3
Pick Dot product to see the angle θ and the green projection of a onto b. Drag b until the vectors are perpendicular and watch a · b become 0.
4
Pick Cross product to see the parallelogram. Its area is |z|; it turns red when b is clockwise from a.
5
Read the worked numbers in the panel beside the grid; every value is substituted into its formula.

Real-world applications

Navigation

A plane’s ground velocity is the sum of its air velocity and the wind velocity.

Work in physics

Work is a dot product, W = F · d: only the part of the force along the motion does work.

Lighting in 3D graphics

Surface brightness uses the dot product of the surface normal and the light direction.

Games

The sign of a 2D cross product tells a game whether a target is to the left or right of a character.

Practice problems

Problem 1: Angle between two vectors

Find the angle between a = (3, 4) and b = (4, −3). Then find a + b and |a + b|.

Show solution

a · b = 3×4 + 4×(−3) = 12 − 12 = 0

cos θ = 0, so θ = 90°: the vectors are perpendicular.

a + b = (3 + 4, 4 − 3) = (7, 1)

|a + b| = √(49 + 1) = √50 ≈ 7.07

θ = 90°, a + b = (7, 1), |a + b| ≈ 7.07

Check with Pythagoras: |a| = |b| = 5 and they are perpendicular, so |a + b| = √(25 + 25).

Problem 2: Projection and parallelogram area

For a = (4, 1) and b = (1, 3), find the projection of a onto b and the area of the parallelogram they span.

Show solution

a · b = 4×1 + 1×3 = 7

|b|² = 1² + 3² = 10

proj_b a = (7/10)(1, 3) = (0.7, 2.1)

z = a_xb_y − a_yb_x = 4×3 − 1×1 = 11

projection = (0.7, 2.1), area = 11

z > 0, so b is counter-clockwise from a. These are the visualizer’s starting vectors.

Discussion

Questions, ideas or a different approach? Join the conversation.