User guide
How to use the demos
Each demo pairs a short lesson from the tutorial with an interactive simulation of its running example: two robot arms deform an elastic rod observed by a camera. The simulation runs in your browser, in a JavaScript port of the shape_servoing Python package, so every change you make is computed live.
The landing page
- Demos in tutorial order. Part I, Fundamentals, builds the shape-servoing loop; Part II, Advanced concepts, analyzes and extends it. Part II demos use a warmer page color. Each card shows a preview, the key concepts, and a ✓ once visited.
- Progress and medals. The bar beside each part counts the demos you have visited; visiting all of them earns the level 1 (Part I) or level 2 (Part II) medal, awarded when you leave the last one (to the next demo or back to this page). Reset progress, at the bottom of the page, starts over.
- Top bar. ? opens this guide, ♪ plays optional background music (silent until you click it; › skips to the next piece), ◐ switches between light and dark themes, switches to a color-blind palette, and ⋯ opens a menu to cite the tutorial or open the glossary and the useful definitions (standard concepts such as range, null space, and pseudoinverse). The buttons under the introduction open this guide, the glossary, the definitions, and the citation.
A demo page
- Top bar. Back to all demos, the current part and demo, Previous and Next, and the guide, music, and theme buttons. The button switches to a color-blind palette, and the ⋯ menu cites the demo, saves its canvases as a PNG figure or a short video, switches to teaching mode (a larger view without the lesson, for lectures; or add
&presentto a demo's address, e.g.demo.html?id=loop&present; Esc leaves), and opens the glossary and the useful definitions. - Lesson. The tutorial content with its equations, a Try this list of experiments to do in order, and the takeaway. Some lessons end with collapsible notes.
- Scene. The running example, computed live. The shaded hint above it says what to try; the legend below names the colors: rod blue, tracked points yellow, target dashed with grey rings, left gripper violet, right gripper orange.
- Toolbar. Run/Pause, Step (one iteration), Reset, and buttons that choose a case or a feature representation.
- Controls. Sliders and switches, each with a one-line description of what it changes, and readouts of the current values.
- Plots. Histories of errors and other signals. Earlier runs stay faded for comparison. Some demos have tabs above the workspace for further experiments.
Ways to interact
Drag the violet (left) or orange (right) gripper; the rod settles to its new equilibrium. Demos 01–04 and 08.
Drag the small ring above a gripper to turn its wrist. Demos 01–04 and 08.
Drag the rod itself to translate both grippers together. Demo 01.
Drag a grey target ring to edit the target shape (Demo 05) or the green marker to set a gripper goal (Demo 11).
Click a column of the Jacobian heat map (Demo 02) or a singular-triplet row (Demo 08) to select and animate it.
Gains, step sizes, damping, perturbations, and options; the scene and readouts update at once.
Run the loop continuously, one iteration at a time, or start again from the initial configuration.
Segmented buttons and tabs choose a case, a representation, or an experiment; Compare buttons run several at once.
In the 3-D view, drag to orbit and use the mouse wheel to zoom. Demo 12.
Hover over a button or control for a short tooltip. The pointer changes over anything you can drag.