═══════════════════════════════════════════════════════════════════════════════ VIBE CODING: Circle Geometry Calculators A conversation with Claude (claude.ai) An example of iterative, conversational software development ═══════════════════════════════════════════════════════════════════════════════ "Vibe coding" is a style of software development where you describe what you want in plain language, iterating conversationally rather than writing code yourself. The AI writes and revises the code; you steer by feel. Below is a real session that produced a polished, three-mode interactive geometry calculator — entirely through natural conversation. ─────────────────────────────────────────────────────────────────────────────── USER: Can you build me a web page that will give the radius of a circle given a secant to the circle and the perpendicular distance from the secant line to the circle CLAUDE: [Built a web page with two modes — center-to-secant distance and sagitta — with a toggle, a live canvas diagram, formula display, and a step-by-step derivation panel. Styled with a typographic, editorial aesthetic using Playfair Display and DM Mono fonts.] ─────────────────────────────────────────────────────────────────────────────── USER: Please revise the web page to use only mode 2 CLAUDE: [Removed the mode toggle entirely, simplified inputs to chord length L and sagitta h, updated all labels, formula, footer, and JS to sagitta-only. Formula: r = h/2 + L²/(8h)] ─────────────────────────────────────────────────────────────────────────────── USER: Adapt the diagram so it focuses on the chord rather than the whole circle CLAUDE: [Rewrote the canvas drawing function. Instead of scaling to fit the whole circle, it now scales so the chord fills ~75% of the canvas width. Only the relevant arc segment is shown prominently; the rest of the circle appears as a faint ghost. The sagitta h became the visual centrepiece.] ─────────────────────────────────────────────────────────────────────────────── USER: Flip the orientation of the diagram so the center of the circle is below the chord, and make the portion of the circle above the chord prominent and the rest of the circle dotted CLAUDE: [Flipped the geometry: chord now sits near the top of the canvas, arc bulges upward above it, circle centre O sits below. The minor arc above the chord is drawn bold and solid; the major arc below is drawn dotted. If the centre falls off-canvas, a subtle "O (off-canvas)" indicator appears.] ─────────────────────────────────────────────────────────────────────────────── USER: Offset the label L in the diagram so it is off center and below the chord CLAUDE: [Moved L label from centred-above to right-of-centre below the chord, clear of the sagitta line and midpoint tick.] ─────────────────────────────────────────────────────────────────────────────── USER: Label r on the diagram, and keep the diagram fixed using the values 20 for the chord length and 2.0 for the sagitta rather than varying the diagram as the values change CLAUDE: [Fixed the diagram geometry to L=20, h=2.0 (giving r=26) so it no longer redraws as inputs change — it's a stable reference illustration. Added an r label positioned perpendicular to the dashed radius line, calculated using vector maths to avoid overlapping other elements.] ─────────────────────────────────────────────────────────────────────────────── USER: Move the r label a bit farther down the radius line so it's not confused with the other parameters CLAUDE: [Moved the r label from 22px to 65px along the radius line from the chord endpoint — well clear of the chord and other labels.] ─────────────────────────────────────────────────────────────────────────────── USER: Very nice - thanks! CLAUDE: You're welcome! It's a clean little calculator now — fixed diagram, clear labels, and the geometry is easy to read at a glance. ─────────────────────────────────────────────────────────────────────────────── USER: Can you create a new calculator formatted identically to this one, but that finds the sagitta given the chord length L and radius r? CLAUDE: [Created sagitta-calculator.html — identical styling. Inputs: L and r. Output: h. Formula: h = r − √(r² − (L/2)²). Same fixed diagram (r=26, L=20, h=2). Four-step derivation starting from the right-triangle relationship.] ─────────────────────────────────────────────────────────────────────────────── USER: Beautiful! Now one more variant: can you create a calculator formatted like the previous ones that calculates the chord length given the radius r and sagitta h? CLAUDE: [Created chord-calculator.html — same style. Inputs: r and h. Output: L. Formula: L = 2√(2rh − h²). Same fixed diagram. Validation catches h > 2r (sagitta exceeding diameter). Derivation shows how substituting d = r − h into Pythagoras leads to the formula. "You now have a complete matched set — each of the three variables solvable from the other two."] ─────────────────────────────────────────────────────────────────────────────── USER: Wonderful! Now can you combine these three calculators into one, with a selection at the top to specify whether you want to find the radius, the sagitta, or the chord length CLAUDE: [Created circle-geometry-calculator.html. A three-button mode selector at the top ("Find r / Find h / Find L") switches inputs, result label, formula, derivation steps, and footer simultaneously. The diagram stays fixed throughout — it illustrates the geometry shared by all modes. All logic consolidated into a MODES config object, keeping the code clean and DRY.] ─────────────────────────────────────────────────────────────────────────────── USER: Thank you! Can you save this conversation as a text file as an example of "vibe coding" that I can share with friends CLAUDE: [You're reading it!] ═══════════════════════════════════════════════════════════════════════════════ FILES PRODUCED ═══════════════════════════════════════════════════════════════════════════════ circle-radius-calculator.html — Find r, given L and h sagitta-calculator.html — Find h, given L and r chord-calculator.html — Find L, given r and h circle-geometry-calculator.html — All three modes in one page ═══════════════════════════════════════════════════════════════════════════════ WHAT MADE THIS "VIBE CODING" ═══════════════════════════════════════════════════════════════════════════════ • No code was written by the human. Every line of HTML, CSS, and JavaScript was produced by Claude. • Direction was given entirely by feel: "focus on the chord", "flip the orientation", "move the label a bit farther down" — imprecise, aesthetic, conversational. • The human steered toward a vision without needing to know how canvas coordinate geometry, arc angle calculations, or perpendicular label offsets work. • Iteration was fast. Each exchange took seconds and the result was immediately visible in the browser. • The final product — a polished, mathematically correct, well-designed interactive tool — emerged from ~12 conversational turns. ═══════════════════════════════════════════════════════════════════════════════