🌉 3 Pt Parabola

The Big Idea: Three non-collinear points with distinct x-coordinates uniquely determine a parabola of the form y = ax² + bx + c (a ≠ 0). This app lets you place those three points on a grid, then automatically fits the parabola and builds a SWArch instance from it.

The Math — Step by Step

1. Fit the parabola (SWArch.fitParabolaToThreePoints): Substitute each point into y = ax² + bx + c to produce a 3 × 3 linear system. Solve by elimination — subtract pairs of equations to cancel c, then b, giving the three coefficients a, b, c.
2. Find the vertex via completing the square: h = −b / (2a) and k = c − b²/(4a). This converts standard form to vertex form y = a(x − h)² + k.
3. Measure base extents: in the local coordinate system centred on the vertex, each input point has local_x = x − h. The leftmost gives xLeft and the rightmost gives xRight — the two base half-widths that SWArch needs.
4. Build the SWArch (SWArch.fromThreePoints): pass the vertex SWPoint, coefficient a, and the two extents to the constructor. If a < 0 the result is an arch ∩; if a > 0 it is a bowl ∪.

How to Use This App

• Add Points: Click anywhere on the canvas to place up to three points (A, B, C).
• Create Arch: Once all three points are placed, click "Create Arch" to fit the parabola.
• Drag Mode: Press D to drag any point; the arch refits in real time.
• Add Mode: Press A to return to add mode (only if fewer than 3 points exist).
• Snap to Grid: Click "Snap Points to Grid" to snap all vertices to the nearest grid intersection.
• Adjust Appearance: Use the Fill Hue and Opacity sliders to change the arch color after it is created.
• Save Image: Download a PNG snapshot of the canvas.
• Clear: Remove all points and the arch to start over.

Constraints

• No two points may share the same x-coordinate (the parabola is a function).
• The three points must not be collinear (otherwise a ≈ 0 and no parabola exists).
• If either constraint is violated the app shows an alert and the arch is not created.

SketchWaveJS classes used by this demo

• SWArch Interactive Demo — explore all SWArch properties with a live control panel
• SWArch Reference
• SWGrid Reference
• SWPoint Reference
• SWColor Reference