Foundation demo
One mathematical state, many views.
Move a vector and watch its length, direction, coordinates and formulas change together. Try dragging, keyboard controls and numerical input.
Drag the tip of
Coordinate plane from −7 to 7 on both axes; +x points right and +y points up. The vector v runs from the origin (0, 0) to the point (3, 2). Its horizontal component is 3 and its vertical component is 2.
- vector
- (3, 2)
- x-component
- 3
- y-component
- 2
- magnitude
- √133.605551…
- direction
- 0.588003 rad
- direction in degrees
- 33.690068°
= exact · ≈ rounded to 6 decimals
from −6 to 6
from −6 to 6
Show the work: computing
Start from the two components: how far right, how far up.
Experiments to try
Try these small experiments and notice how the visual, numerical and symbolic representations agree.
| Capability | Where to look |
|---|---|
| One state, many views | Move the tip: the plane, the values, the formulas and the work change together. |
| Three equivalent inputs | Drag the tip; focus it and use the arrow keys (Shift moves five steps); or type into the x and y fields. |
| Exact versus approximate | Watch the magnitude row. Try , and . |
| Undefined is a state | Set both fields to : the direction becomes undefined and the arrow disappears. |
| A visible snap policy | Switch Snap to between 1, ½, 0.1 and Free. |
| Deterministic trace | Step through Show the work; going back selects an earlier frame. |
| Long equations | On a narrow screen, scroll the longer formula below without widening the page. |
| Python examples | Compare the step-by-step calculation with the NumPy version below. |
Conventions in force
These conventions help you read vectors and formulas throughout the book.
- The plane has to the right and up. Screen coordinates, where points down, are converted in exactly one place.
- Vectors are columns, . Matrices act from the left, , and if acts first then .
- Angles are in radians; degrees appear only as a secondary display.
- means exactly equal and means a rounded approximation. A rounded number is never shown with an equals sign.
Mathematical typography
Inline mathematics sits in the line: the vector has components and , and its length is . Display mathematics gets its own line:
A very long equation must never widen the page. This one is long on purpose, and on a phone it scrolls inside its own box, which becomes a keyboard-reachable region only when it actually overflows:
Exact and approximate
The inspector never lets a rounded value pose as an exact one.
| Quantity | Exact form | Approximation | Shown as |
|---|---|---|---|
| 3.605551… | = √13, then ≈ 3.605551… | ||
| none needed | = 5 only | ||
| not claimed | 2.915476 | ≈ 2.915476 only | |
| direction of | undefined | none | undefined, with the reason |
The trailing ”…” appears only when the exact value is known to be irrational. For the model makes no claim about an exact form, so it shows only what it computed.
Run the calculation in Python
The first example works through the calculation step by step. The second uses NumPy. Compare their results and try changing the input values.
import math
# A 2D vector is stored as two components. Here: v = (3, 2).
x = 3.0
y = 2.0
# Pythagoras: the hypotenuse of the right triangle with legs |x| and |y|.
magnitude = math.sqrt(x * x + y * y) # ‖v‖ = √(x² + y²)
# atan2 knows the quadrant of (x, y); atan(y / x) does not.
angle = math.atan2(y, x) # radians, in (−π, π]
print(magnitude, angle) # 3.605551275463989 0.5880026035475675import numpy as np
# The practical form: once the mechanism is clear, the library does the bookkeeping.
v = np.array([3.0, 2.0])
magnitude = np.linalg.norm(v) # ‖v‖₂
angle = np.arctan2(v[1], v[0]) # radians, in (−π, π]
print(magnitude, angle) # 3.605551275463989 0.5880026035475675