This animation addresses a problem that Johann Bernoulli came up with in 1696 AD.
The problem was stated: "What is the shape of a wire curved in two dimensions that will yield the
least time for a frictionless bead under the force of gravity to traverse the path between
two of its points?". It was obvious from the question that the wire curve would have to be in a vertical plane.
It was solved (see Brachistochrone in Wikipedia) by Isaac Newton and others and shown to be a cycloid. I think that
the solution by Johann's brother, Jakob, which uses Fermat's principle (light ray always takes path of least propagation time), is the
least complex and that leads us into the "principle of least action" (Wikipedia again) which is a MAJOR cornerstone of physics.
A cycloid is the curve drawn by a point on a wheel that rolls on a flat surface and is shown in blue in this animation.
The cycloid width and height depend on the wheel radius and its curve width and height can be changed by dragging
the circle at the top left of the curve. An additional 4 point Bezier curve (Wikipedia again) is included which has the same end points as
the cycloid curve since we are timing the fall between the same start and end points. Drag the lower two circles to change the
middle two Bezier points and thereby adjust the shape of the curve.
To adjust the curve shape, I made a major departure from my usual method of changing parameters: that of doing mouse drags.
This is more complex to program but is well worth the effort in terms of direct learner interaction. The learner
is welcome to hit F12 in Windows and then select Sources to examine the mouseDrag.js code used to accomplish this.
I've also changed the Buttons that are used to Start, abort, Pause, and Continue the motion of the beads on the wires.
Pressing Start Run or abort Run always resets the beads to the starting point. The Abort Run button aborts the present
run and allows for adjusting the shape of the Bezier curve. The Pause and Continue buttons just allow for inspection
of the beads and data at any time in the run.
From Start Run to the end of the run, the programming is such that the circles cannot be dragged
since doing so would invalidate the timing.
Note that I have plotted energies as well as the bead progress. Of course, the total energy change must be zero as shown by
the green dashed line.