Parabola Saga (v3)

“I’d unravel every axis,
chart the vertex’ fateful nexus…
If I only had a vertex!”

🧮 What This App Is About

Fix a and c, then set a range for b (b_min, b_max, b_step) and click Draw Family. All parabolas y = ax² + bx + c in the range are graphed together, color-coded smoothly from the b_min color to the b_max color. The vertex of each parabola is marked with a color-matched dot.

The dashed white overlay is the vertex locus — the parabola y = −ax² + c that every vertex lies on. It opens in the opposite direction from the family, passes through (0, c), and depends only on a and c. See Phase 2’s trail feature and the S.P.A.R.K. Chat Log for the algebraic proof.

🎮 Controls

• a slider — opens direction and width; positive = opens up (minimum), negative = opens down (maximum).
• c slider — vertical shift; (0, c) is the shared y-intercept of every family member.
• b min / b max / b step — define the range of b values to graph. Press Enter or click outside the input to apply. Capped at 200 parabolas.
• b_min / b_max color pickers — set the colors at the two ends of the range. Intermediate parabolas shift smoothly through the color spectrum between them.
• Show vertex locus — toggles the dashed y = −ax² + c overlay.
• Show vertex dots — toggles the color-matched dot at each vertex.
• Show vertex labels — shows (h, k) coordinates next to each dot. Best with a small b range.
• Press G to toggle the grid  |  E to toggle axis labels.
• ▶ Draw Family — graphs the complete family from the current settings. Control changes while a family is drawn automatically redraw.
• ↺ Reset — clears the canvas and restores all defaults.
• 💾 Save Image — saves a PNG snapshot of the canvas.

🧑‍💻 Developer Notes

Developer

klp

Date

09/10/2026 (Phase 3)

Commentary

Built on SketchWaveJS 2026. 600-segment p5.js polylines per parabola; colors via p5.js lerpColor() in HSB mode. Vertex locus drawn with drawingContext.setLineDash(). The “Draw Family” button intercepts the template’s Start handler via stopImmediatePropagation() so the app stays in noLoop() throughout.