Parabola Saga (v1)

SWJS Examples
TNT-Processing
Explore TNT

S.P.A.R.K. Chat Log Parabola Saga • Phase 1: Grid • 09/10/2026

v1 — Grid v2 — Single Parabola v3 — Family of Parabolas S.P.A.R.K. Log

Parabola Saga (v1)

Researching the influence of the 'b' coefficient on parabolas with fixed 'a' and 'c'.

...loading...

Canvas: Grid:

📐 Grid Settings

Grid size: ±10 Grid step

Grid G

Labels E

Background

TNT is an educational, evolutionary site serving as a playground where teachers and students can field-test programming designs.

All rights reserved.
© 2015-2022 TNT

Last update:

📈 Parabola Saga — Study the b Coefficient

“Whether ‘down-y’ or an ‘up-y’, I can classify that puppy…
But I sure need a vertex!”

🧮 What This App Is About

The quadratic function y = ax² + bx + c produces a parabola. Fix a and c, then vary b across a range and graph all the resulting parabolas at once. The pattern that emerges reveals exactly what b controls: the horizontal position of the vertex (via h = −b / (2a)), and the slope of the curve at the y-intercept.

📏 Phase 1: Adjustable Cartesian Grid

Before drawing parabolas, we need a reliable coordinate system. Phase 1 lets you set the grid size (how far the axes extend from the origin) and the grid step (spacing between tick marks). The grid is always square and centered on the origin. Once the grid feels right, Phase 2 will add the parabola controls.

🎮 Controls

Grid size — sets the axis range from −N to +N.
Grid step — spacing between grid lines and tick labels.
Press G to toggle the grid | E to toggle axis labels.
↺ Reset — restores grid to ±10, step 1.
💾 Save Image — saves a PNG snapshot of the canvas.

🧑‍💻 Developer Notes

Developer: klp
Date: 09/09/2026
Commentary: Built with SketchWaveJS 2026. Uses SWGrid for the coordinate system. Phase 1 establishes the grid infrastructure. Parabola drawing (Phase 2) will plot y = ax² + bx + c for a range of b values with fixed a and c.