Applet: Gradient and directional derivative on a mountain
Applet loading
Applet loading
The height of a mountain range described by a function $f(x,y)$ is shown as surface plot in three-dimensions (left) and a two-dimensional level curve plot (right). In each panel, a red point can be moved by the mouse to change the location $\vc{a}$ where the gradient $\nabla f(\vc{a})$ is calculated. Since $f$ is a function of two variables, the point $\vc{a}$ and the gradient are two-dimensional. The two-dimensional point $\vc{a}$ is illustrated by the shadow of the red point on the $xy$-plane below the surface plot and by the red point itself on the level curve plot. The two dimensional gradient vector $\nabla f(\vc{a})$ is illustrated by the red vector emanating from the red point as well as by its shadow below the surface plot.
The light green two-dimensional vector $\vc{u}$ points at an angle $\theta$ (changeable via the slider) from the gradient. (It is also represented by its shadow below the surface plot.) The value of the directional derivative $D_{\vc{u}}f(\vc{a})$ is the slope of the dark green vector tangent to the surface, which is reproduced next to the value of $D_{\vc{u}}f(\vc{a})$ shown at the bottom of each panel. The value of the directional derivative is compared to the magnitude of the gradient $\| \nabla f(\vc{a})\|$. The height of the surface $f(\vc{a})$ is also illustrated by the bar in the lower right of the second panel.
Applet links
This applet is found in the pages
General information about three.js applets
The applet was made using three.js and requires Javascript as well as a browser that supports WebGL. For most three.js applets, you can drag with the mouse to rotate the view, drag with the right button to pan, and zoom in/out with the mouse wheel. Many applets contain points that you can drag to change values of variables.