Chris Collins

Tools · math

Vectors playground

Drag vectors in 2-D or a rotatable 3-D view and watch sums, linear combinations, dot and cross products, norms and Lᵖ circles, span and linear independence, and change of basis update live — with every number beside the picture — and see why random directions in high dimensions are nearly perpendicular.

Added · updated 14 October 2026

How to use it

Pick what to explore from the list, then drag the arrow tips on the canvas or type exact values (1/2, -3, sqrt(2), 2*cos(pi/6)) in the boxes beside it. Everything recalculates as you drag.

  • Sum & difference draws u + v tip to tail and as the diagonal of the parallelogram, and u − v from the tip of v to the tip of u.

  • Linear combination builds a·u + b·v from sliders. Drag the target and press Find a, b to solve for the coefficients that reach it (in 3-D, the closest point on the plane of u and v).

  • Dot product shows the projection of u onto v, the angle between them, and u · v computed both ways: as Σuᵢvᵢ and as |u| |v| cos θ.

  • Cross product (3-D) draws u × v perpendicular to both, with the parallelogram whose area it measures. In 2-D it shows that signed area instead.

  • Norms compares the L₁, L₂ and L∞ lengths of u — the dashed diamond, circle and square pass through its tip — and the unit vector û.

  • Lᵖ circles (any p) draws every point at distance r from a centre you can drag, in the Lᵖ metric, with a slider for p: a diamond at p = 1 (Manhattan), a circle at p = 2 (Euclidean), and a square as p → ∞ (Chebyshev). The other three are drawn faintly for comparison, and a dashed curve passes through u. Beside it: the distance from the centre to u in L₁, L₂, L∞ and the chosen p (always L∞ ≤ L₂ ≤ L₁). Below p = 1 the "circle" turns into a star: it is not convex and the triangle inequality fails, so it is not a norm, and the tool says so.

  • Span & independence shades the line, plane or space that one, two or three vectors span, gives the rank, and, when the vectors are dependent, the exact relation between them (for example u − 2v + w = 0).

  • Change of basis draws the lattice of a new basis b₁, b₂ (b₃) and finds the coordinates [x]_B of x — exactly, as fractions, when the entries are rational.

  • High dimensions (random cosines) draws pairs of random (Gaussian) vectors in d dimensions, from 2 to 4096, and histograms the cosine similarity of each pair. In 2-D any value is common; as d grows the histogram squeezes around 0 with a spread of about 1/√d, so random high-dimensional vectors are nearly perpendicular. The red curve is the exact distribution of the cosine, the dashed curve the normal approximation N(0, 1/d), and the green lines mark ±1/√d. A second chart shows the distances from one random point of the unit cube to 1000 others: as d grows the nearest and the farthest close in on each other. The random numbers are seeded, so a link always draws the same sample; New sample changes the seed.

In 2-D, drag empty space to pan and scroll to zoom; in 3-D, drag empty space to orbit. Tips snap to halves; hold Shift (or untick the box) to move them freely.

⛶ Full screen (or F) gives the drawing the whole screen — the browser’s full screen where it is allowed, otherwise a full-window layer (iPhone); it is redrawn as the window changes, and ◫ Panels hides the controls beside it. Escape leaves.

Limits

  • The Lᵖ circle is drawn in 2-D only (in 3-D the distances are still computed). p runs from 0.25 to 100, plus ∞; the slider covers 0.5 to 10.

  • The high-dimensional charts use up to 5000 pairs and d up to 4096; large d with many pairs takes a moment. Real sentence embeddings (the book’s third panel) are not included: they need a trained model.

  • The A* search panel of the book’s "Unit circles in three metrics" lab is not here.

Related: Matrix transformations (a matrix as a bundle of vectors), Linear systems, visually, the Matrix calculator, and Graphing (draw |x|^p + |y|^p = 1 yourself).

Companion to the vectors chapter (including high-dimensional intuition) and the distance metrics section of the coordinates chapter of Mathematics, Reconnected.

Sharing

Share link copies a URL that reopens the playground with your vectors, view and operation.

Linking to an example

Links can also be written by hand. Every parameter is optional; anything left out keeps its starting value.

Parameter Meaning Example value

op

What to explore: sum, comb, dot, cross, norms, lp, span, basis, cosine

lp

dim

2 or 3 (a vector with a third component also switches to 3-D)

3

u, v, w

Vectors, components separated by commas (decimals or fractions)

3,4

x

The target (linear combination) or the vector x (change of basis)

7,1

c

The centre of the Lᵖ circle

1,1

b1, b2, b3

The new basis (change of basis)

1,1

a, b

The coefficients in a·u + b·v

8/3

n

How many vectors span & independence uses (1–3)

3

p

The p of the Lᵖ circle, 0.25–100, or inf

inf

r

The radius of the Lᵖ circle

5

d

The dimension for random cosines, 2–4096

768

pairs

How many random pairs, 10–5000

2000

seed

The random seed (same seed, same sample)

26

example

A preset from the list below; parameters written beside it win

ch10-taxicab

Write positive numbers without a ` (in a URL a ` reads as a space, which is ignored), and separate components with commas. For example ?op=lp&p=1.5&c=0 or ?example=ch26-cosine-highdim&d=100.

Presets (?example=…):

  • ch10-lp-ball — the unit circle in the Lᵖ metric at p = 1 (a diamond); slide p to 2 and ∞.

  • ch10-taxicab — A(1, 1) to B(5, 4): Euclidean 5, Manhattan 7, Chebyshev 4.

  • ch10-not-a-norm — p = ½: a star-shaped "circle", and the triangle inequality failing.

  • ch26-add — a = (4, 1) plus b = (1, 3) = (5, 4), tip to tail and as a parallelogram.

  • ch26-reach-7-1 — reaching (7, 1) with 8/3 of a = (2, 1) and 5/3 of b = (1, −1).

  • ch26-collapse — b on the line of a: the combinations collapse to a line.

  • ch26-normalise — normalising (2, −1, 2): length 3, unit vector (2/3, −1/3, 2/3).

  • ch26-angle-3d — the angle between (1, 2, 2) and (2, −1, 2): cos θ = 4/9, θ ≈ 63.6°.

  • ch26-project — projecting a = (2, 3) onto b = (5, 1), with the perpendicular residual.

  • ch26-cross — (1, 2, 3) × (4, 5, 6) = (−3, 6, −3), perpendicular to both.

  • ch26-cosine-2d — cosines of random pairs in 2-D: spread over [−1, 1], sd ≈ 0.707.

  • ch26-cosine-highdim — random pairs in 768 dimensions: sd ≈ 1/√768 ≈ 0.036.

Runs entirely in your browser; nothing you type leaves this page.