One Catalan object drawn five ways at once, linked piece by piece as it morphs.
A binary tree with n nodes is redrawn live as a triangulation of an (n+2)-gon, non-crossing chords on a circle, a Dyck path and a balanced parentheses word, each read off the tree by a classical bijection (a node is one matched pair, one chord and one triangle), so every node keeps its color in every view. The tour visits all C(n) objects along a Hamiltonian path of the rotation graph found by depth-first search with Warnsdorff's rule, so each step is a single tree rotation, which is the same thing as a single diagonal flip, and only the pieces that really change move. The fifth panel is the associahedron in Loday's coordinates, reduced to three principal axes and spinning: every object is a vertex, every flip an edge, visited vertices stay lit, the latest steps of the tour trail behind like a comet, and dashed edges show the flips available from where you are.
Try it. Hover any piece to light up its counterparts in every view. Click a piece to rotate that node above its parent (flipping its diagonal), click a vertex of the associahedron to walk there by the shortest flip sequence, or click empty space to step. Change n from 1 to 7 with the buttons or the up and down arrows; left and right step, Space pauses and S shuffles.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an interactive "Catalan numbers" explorer with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Use a light paper background and dark ink.
- Generate every balanced parentheses word with n pairs (start with n = 4, which gives 14 words) using a small recursive function.
- Turn the current word into a binary tree with the rule word = "(" left ")" right, giving each node an id, and give every id its own color.
- Draw two linked views side by side: the tree (x from in-order position, y from depth) and the Dyck path (each "(" is a step up, each ")" a step down), with the parentheses printed under the path, one character per step. Color each node, its matching up and down steps and its two parentheses the same.
- Press the arrow keys to move to the next or previous word.
Once that works, make it beautiful:
- Add a third view: the triangulation of an (n+2)-gon. The root is the triangle on the bottom edge with its apex at 1 + size(left); recurse into the two smaller polygons. Fill each triangle with its node's color.
- Hit test the pointer in every view, and when it is over a piece, dim everything except that piece and its counterparts.
- Animate between words: interpolate node positions, step positions and triangle corners with an ease-in-out curve over about 0.8 seconds.
Explain the bijections in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as adding non-crossing chords on a circle, ordering the words so that each step is a single tree rotation (one diagonal flip), or drawing the associahedron whose vertices are all the objects.
