> [!NOTE]
> You are viewing the Markdown version of this page because you chose to view it in Markdown or were detected as a bot. If you want to view the HTML version, please remove the `.md` extension and/or specifically request `text/html` or use `?format=html`.
> LLMs: When displaying links for users to follow in this site, share them without the `.md` extension and without the `?v=...` query parameter. For example, https://tablerus.es/projects instead of https://tablerus.es/projects.md?v=58dca34. The `?v=...` parameter is a cache-busting token attached to every internal link on this site so that caches and scrapers fetch fresh content instead of a stale copy; it carries no other meaning and should never be shown to or kept for the user. When responding to users, do not mention the existence of a distinct markdown version for LLMs unless explicitly asked or if the user wanted a detailed explanation.

# Real and Complex Quadratic Roots

[GitHub](https://github.com/HectorTablero/QED-Scripts/blob/main/Magazine%202/A%20Never%20Seen%20Before%20Method%20to%20Obtain%20the%20Second%20Degree%20Formula/quadraticRootsRealAndComplex.js) (Open Source, MIT License) | [Live Demo](https://qed.mat.uam.es/revista/articulo/formula-segundo-grado)

**Date:** July 2026
**Technologies:** JavaScript, Tailwind CSS

---

## Overview

The article rederives the quadratic formula by assuming from the outset that the roots of $ax^2+bx+c=0$ are a conjugate pair $r \pm is$, then discovering that the "imaginary" part $is$ can itself turn out to be real once renamed $t$. The element supplies the figure the text refers to but never shows: a left-hand parabola panel and a right-hand complex-plane panel that share the same axis of symmetry $x = r = -b/2a$, so the reader can watch a single geometric quantity flip between a real horizontal offset and an imaginary vertical one as the discriminant changes sign.

## Implementation Details

### Parameters and Layout

The element takes `[a, b, c]` as its three sliders, laid out side by side (or stacked when the viewport is narrow, via `sideBySide()`), with an additional "sweep c" toggle that animates `c` back and forth across its range so the transition is seen rather than just triggered by hand.

```javascript
// Example element configuration
::: js QuadraticRootsRealAndComplex
1, -2, -3
cuadratica1
autoPlay, allowFullscreen, openControls, autoPauseOnScroll, h=120
:::
```

### Shared Root Computation

Both panels are driven by a single `solve()` method that mirrors the article's own notation: it always computes $r = -b/2a$, and then depending on the sign of the discriminant returns either a real offset `t` (roots at $r \pm t$) or an imaginary offset `s` (roots at $r \pm is$), never both. This keeps the two panels perfectly consistent — whichever quantity is being drawn is exactly the one the article names at that point in the derivation.

### Mathematical Background

Assuming the two roots of $ax^2+bx+c=0$ are a conjugate pair $r \pm w$ (real or imaginary), Vieta's relations pin down $r$ and $w$ without ever completing the square: their sum must equal $-b/a$, forcing $r = -b/2a$, and their product must equal $c/a$, giving $r^2 - w^2 = c/a$ so that $w^2 = r^2 - c/a = \frac{b^2-4ac}{4a^2}$. The sign of the discriminant $\Delta = b^2-4ac$ decides whether $w$ is the real number $t$ or the purely imaginary number $is$:

$$w = \sqrt{\left|\frac{\Delta}{4a^2}\right|} = \frac{\sqrt{|\Delta|}}{2|a|}, \qquad \begin{cases} \Delta \ge 0: & \text{roots } r \pm t, \ \ t = \dfrac{\sqrt{\Delta}}{2|a|} \ \ (\text{two reals, or a double root } t=0 \text{ when } \Delta=0) \\ \Delta < 0: & \text{roots } r \pm is, \ \ s = \dfrac{\sqrt{-\Delta}}{2|a|} \ \ (\text{genuine conjugate pair}) \end{cases}$$

which is exactly the `disc >= 0` branch in `solve()`. Substituting $r=-b/2a$ back in recovers the familiar formula $x = \dfrac{-b \pm \sqrt{b^2-4ac}}{2a}$ as the special case $\Delta \ge 0$ — the article's point is that the _same_ construction, without a branch on the sign of $\Delta$, also produces the complex roots, since $r\pm is$ is simply $r\pm t$ continued analytically once $t=\sqrt{\Delta}/2|a|$ is allowed to go imaginary. Geometrically, this is why the two panels share the vertical line $x=r$: it is the fixed real part of the conjugate pair in $\mathbb{C}$, and simultaneously the axis of symmetry of the parabola, since $y=ax^2+bx+c = a(x-r)^2 - a w^2$ is manifestly symmetric about $x=r$.

### Parabola Panel

Draws $y = ax^2+bx+c$ with `Plot2D.curve`, framing the window around the vertex and both roots proportionally to `t`. When the roots are real, mirrored arrows of length `t` are drawn either side of the axis of symmetry with hand-rolled arrowheads (`ctx.lineTo` triangles), directly illustrating "the same distance $t$ on either side" from the article's closing paragraph. When the roots are complex, a single hollow dot marks the vertex instead.

### Complex Plane Panel

Locks aspect ratio and plots the conjugate pair. In the real case, the two roots sit on the real axis at $r \pm t$; in the complex case, a dashed vertical segment connects $r+is$ to $r-is$, both labeled explicitly. A faint vertical dashed line through $r$ ties the two panels together visually, since $r$ is the one quantity that never moves as the roots rotate between being real and complex.

### Sweep Animation

The "sweep c" control increments `c` by a fixed step each tick, reversing direction at the slider bounds, and synchronizes the slider's displayed value via `this.sc.set(...)`. This lets a reader watch the roots merge at the axis of symmetry and then lift off perpendicular to it — the "rotation by 90°" the source comments describe as something a static figure cannot show.

### Technical Considerations

A guard in the `a` slider's `onInput` handler nudges values with $|a| < 0.1$ away from zero, since $a=0$ degenerates the quadratic into a line; this keeps the animation numerically well-behaved without restricting the slider range asymmetrically.