Vol. XII — Science · Graphics
Three desks in one page: the vocabulary engines use (frames, vectors, TRS, cameras, winding), how pivots actually move an object, and an interactive handedness lesson you can flip. Sibling tone to the Standard Model and Gravity lessons — schematic, cited, not a GPU course.
Educational schematic. API notes are tendencies with disclaimers — always check the API you are shipping against. Vanilla canvas; theme-aware; phone-friendly.
A finger or mouse for the gizmos. No WebGL required. Math stays in prose + pictures; formulas appear only where they unlock a mental model.
01 — Basics
Drag to orbit · basics gizmo
Readout
RGB axes are +X / +Y / +Z. The faint cube sits in the active frame. Toggle Local vs World to see the same object relative to its own axes or the stage.
02 — Fulcrum / pivot
To spin around a pivot that is not the origin: translate so the pivot sits at the origin, rotate, translate back. In code that is often T(pivot) · R · T(−pivot) (column-vector convention).
Local pivot — defined in the object’s own space (a door hinge on the door). World pivot — a fixed point in the stage (spin around a world origin marker). Same math; different which frame supplies the pivot coordinates.
Drag to orbit · tap buttons to switch pivot
Pivot
Yellow dot = fulcrum. The box orbits that point. Local mode keeps the hinge glued to the object; world mode pins the fulcrum in the stage.
03 — Handedness
Point thumb along +X, index along +Y: the middle finger shows +Z for that hand rule. Right-handed: +Z comes toward you when +X is right and +Y is up (common in mathematics and many OpenGL-style tutorials). Left-handed: +Z goes into the screen in that same picture (common in some Direct3D samples historically).
API tendencies (with disclaimers) — these are starting points, not laws:
Engines (Unity, Unreal, custom) pick conventions explicitly. Always read the engine’s matrix docs before porting shaders.
Drag to orbit · flip handedness
Gizmo
Flip Z to mirror the triad. Watch which way the blue axis points relative to red (+X) and green (+Y). That is the whole lesson in one motion.
Sources
Also on the science desk
10
Particle literacy with an interactive grid.
11
Weight, orbits, spacetime — schematic, cited.
Not a substitute for an API reference or a linear-algebra course. Handedness and clip-space details change with Y-flip, depth range (0…1 vs −1…1), and row-major vs column-major storage — test on device.