Gradient and Directional Derivative

Stand on a hilly surface $f(x,y)$ and ask: which way is uphill, and how steep is it if I walk in some chosen direction? The gradient $\nabla f = (f_x, f_y)$ answers the first: it points in the direction of steepest ascent, its length is that steepest slope, and it always sits perpendicular to the contour line you are standing on. The directional derivative answers the second: walking along a unit direction $\mathbf{u}$, the slope you feel is the projection of the gradient onto your direction, $D_{\mathbf{u}} f = \nabla f \cdot \mathbf{u} = |\nabla f|\cos(\theta - \theta_{\text{grad}})$. So the slope is largest straight up the gradient, zero when you walk along the contour (perpendicular to the gradient), and most negative straight downhill. Drag the probe around the field and swing the direction to watch the projection, and the cosine curve below, rise and fall.

Figure 1. Gradient and directional derivative. Top: the field f(x,y) as a heatmap with contours and gradient arrows; a draggable probe shows the gradient (steepest ascent, perpendicular to the contour) and a chosen direction u, with D_u f as the green projection of the gradient onto u. Bottom: D_u f versus direction angle, a cosine peaking along the gradient. Method: closed-form fields with exact gradients. Source: Stewart, Calculus, 8e, Sec. 14.6.

field

direction u29 deg

WHAT TO TRY

Drag the probe to a steep flank: the gradient arrow lengthens and the cosine curve below grows taller (a bigger maximum slope $|\nabla f|$).
Swing the direction onto the gradient (the gold dashed line): the green projection reaches the full gradient length and $D_{\mathbf{u}} f$ hits its peak.
Turn the direction perpendicular to the gradient: the projection collapses to zero, because walking along a contour has no slope.
Drag the probe onto a hilltop or the saddle centre: the gradient vanishes, the cosine curve flattens to zero, and every direction is level.