Drag a triangle: 46 Kimberling centers, the Euler line and Morley's triangle follow.
Each center comes from its own entry in Clark Kimberling's Encyclopedia of Triangle Centers: a barycentric formula in the side lengths and angles, such as a / sin(A + π/3) for the Fermat point, or a relation like 'X(20) is X(4) reflected in X(3)'. Because the formulas are independent, the figure checks itself as you drag: sixteen different points stay on the Euler line, the centroid always cuts it 1 : 2, the Feuerbach point stays where the incircle touches the nine-point circle, and the three angle trisectors nearest each side meet in a triangle whose angles read 60.000 degrees for any shape. A construction tour sketches one classical construction at a time with an animated compass and straightedge, every arc and line recomputed from the live triangle each frame.
Try it. Drag the vertices, or click empty paper to pull the nearest vertex there. Click a dot or a row of the encyclopedia panel to name a center and see its formula and the lines it lies on (up and down step through the list). Left and right switch constructions, Space pauses the tour, L hides the labels and R resets the triangle.
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 triangle centers 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 full-window canvas that stays sharp on high-DPI screens (scale by devicePixelRatio). Paint it like graph paper: cream with thin blue grid lines.
- Add three draggable vertices A, B and C (pointer events, so mouse and touch both work) and draw the triangle in dark ink.
- Compute the side lengths a, b, c and the angles A, B, C every frame. Write one function that turns barycentric coordinates (u : v : w) into a point: (uA + vB + wC) / (u + v + w).
- Use it for a handful of centers from Kimberling's Encyclopedia of Triangle Centers: incenter X(1) = a : b : c, centroid X(2) = 1 : 1 : 1, circumcenter X(3) = a cos A : b cos B : c cos C, orthocenter X(4) = tan A : tan B : tan C, and the nine-point center X(5) as the midpoint of X(3) and X(4). Draw each as a labeled dot.
- Draw the circumcircle, the incircle, the nine-point circle (radius R / 2) and the Euler line through X(3) and X(4).
Once that works, make it beautiful:
- Add Morley's triangle: from each vertex, rotate the direction of each side by a third of the angle toward the inside, intersect the two trisectors nearest each side, and fill the resulting triangle in red. Print its three angles to prove it is always equilateral.
- Animate a construction, drawing each line or arc a little more every frame, like a geometer with a compass and ruler.
- Add more centers (Fermat point a / sin(A + 60°), symmedian point a², Nagel point b + c − a) and keep labels from overlapping.
Explain the key ideas 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 a searchable list of more Kimberling centers, automatic collinearity checks, or Napoleon's theorem.
