The Dot Product

What to observe

1. Drag the head of b in a circle around the origin, keeping it the same length. Its shadow on a grows, shrinks, vanishes and comes back negative, and the number follows it exactly. The dot product only ever measures that shadow.
2. Stop where the shadow disappears. The arrows are at right angles, the number is zero, and it got there smoothly from both sides. Perpendicular means "nothing of one goes along the other", which is the one fact this operation exists to detect.
3. Push b past that point. The foot of the perpendicular lands on the far side of the origin, so the shadow counts as negative and so does the product. The sign is not a convention, it is which way the shadow fell.
4. The shaded rectangle is the product made visible: one side is the shadow, the other is the length of a, so its area is a · b. Lengthen a and the rectangle grows in one direction only; swing b and it grows in the other.
5. Make a twice as long. Every bit of the answer doubles, while the angle and the shadow direction do not move at all. The dot product knows nothing except two lengths and how much they agree.
6. Set a to length 1. Now a · b is the shadow, with no scaling left over. That is why "how much of this lies in that direction" is always written as a dot product against a unit vector.
7. The panel computes the same number a second way, straight from the components: a_xb_x + a_yb_y. It always matches the picture, which is the whole reason the algebraic formula is worth trusting. Switch to 3D and one more term joins in, and nothing else about the picture changes.