Conics, pixels and metrics
Coordinate geometry you can drag: conics from a focus, a directrix and an eccentricity slider (and from slicing a cone), a parabolic reflector, Bresenham, DDA and anti-aliased lines stepped pixel by pixel with the decision value D, Lᵖ unit circles and A* heuristics, the inscribed angle and Thales, a line meeting a circle via the discriminant, and world-to-screen mapping.
Added
How to use it
Seven tabs, each a picture you can drag with the numbers beside it. Every tab has a Book examples menu with the worked examples from Mathematics, Reconnected.
How to use it
-
Conics — Focus & directrix: drag the eccentricity slider e. The orange curve is every point P whose distance to the focus F is e times its distance to the directrix (dashed). Below 1 it is an ellipse, at exactly 1 a parabola, above 1 a hyperbola (both branches, with its asymptotes). Drag the focus, the directrix, or the red point P along the curve: the panel shows |PF|, the distance to the directrix, their ratio e, the standard-form equation, the centre, a, b and c = e·a, the second focus and directrix, and |PF| + |PF₂| = 2a (ellipse) or the difference (hyperbola). Slice a cone: tilt a plane through a double cone of half-angle α. The slice is shown in 3-D (drag to turn it) and face on; its eccentricity is sin θ ÷ cos α, so it becomes a parabola exactly when the tilt θ reaches 90° − α.
-
Reflector — a dish of given width and depth has focal length f = (width/2)² ÷ (4 · depth). Parallel rays reflect through the focus; tilt them off the axis to see them miss (the spread on the focal line is shown). Tick Headlight to run it backwards: light from the focus leaves as a parallel beam. One point of the dish shows its equal distances to the focus and the directrix.
-
Pixels — drag the start (green) and end (purple) pixels, or tap a cell to move the nearer one. Step through with ◀ ▶ (or Play) and watch the table:
-
Midpoint (D) — the book’s decision-variable procedure, extended to every direction by stepping along the longer axis. D starts at 2Δy − Δx; D > 0 means the true line passes above the midpoint (orange dot), so step diagonally. Rows where D = 0 are ties.
-
Bresenham all-octant — the book’s production version with one error term err and e2 = 2·err. It breaks ties the other way, and the tool says which pixels differ.
-
DDA — equal steps in floating point, rounded (halves round up; Python’s
round()would round them to even). -
Anti-aliased — Xiaolin Wu style: two pixels per column, shaded by closeness, adding to 1.
-
-
Metrics & A* — the slider sets p (far right is ∞). The thick orange curve is the Lᵖ unit circle around A; dashed: L¹ (diamond), L² (circle), L∞ (square). Drag A and B to compare the three distances (always Chebyshev ≤ Euclidean ≤ Manhattan). Below 1 the “circle” caves in and is no longer a metric. The A* panel searches a 24 × 14 grid with 4 moves (rook) or 8 (king, every move costing 1, no cutting wall corners) and compares the number of nodes expanded and the path found with each heuristic.
-
Inscribed angle — drag A, B and V around the rim. ∠AVB is half the arc it stands on (the arc AB not containing V), so it stays fixed while V stays on one arc and jumps to 180° minus it on the other. Put A and B at opposite ends of a diameter for Thales' right angle. Tick the fourth point W for a cyclic quadrilateral.
-
Line & circle — type the line as y = m·x + c (or x = constant) and the circle’s centre and radius; fractions such as
-3/4are fine. The panel substitutes the line into the circle, shows the quadratic A x² + B x + C = 0 and its discriminant Δ, and classifies the line as a secant (Δ > 0), tangent (Δ = 0) or miss (Δ < 0), with the points. Drag the orange handle to slide the line and the black dot to move the circle. -
World → screen — a W × H canvas at s pixels per unit, centred on (cx, cy): col = W/2 + s(x − cx), row = H/2 − s(y − cy). Drag the red point or type it; type a pixel “col, row” to convert back.
⛶ Full screen (or F) gives the current tab’s drawing the whole screen — the browser’s full
screen where it is allowed, otherwise a full-window layer (iPhone); the plot widens or deepens its
view to fill the space and is redrawn as the window changes, and ◫ Panels hides the controls
beside it. Escape leaves.
Limits
Everything is drawn in floating point; a tangent is recognised when Δ is zero to about nine significant figures. The conic directrix is horizontal or vertical (no rotated conics). The pixel grid is for short lines (it fits itself to the endpoints). A* uses unit move costs only (no √2 diagonals) and fixed layouts; diagonal moves never cut a wall corner, and ties in f are broken by the smaller h, then by the order nodes were found, so other implementations may expand a few nodes more or fewer.
Related: Geometry: triangles, circles, polygons, solids, Algebra step by step (quadratics and the discriminant), Graphing calculator, Matrix transformations, Vectors playground.
Companion to chapter 10, Coordinate geometry (conic sections, world to screen, Bresenham’s algorithm, distance metrics), chapter 9, Circles (the inscribed angle) and chapter 8, Quadratics (the reflective property) of Mathematics, Reconnected.
Linking to an example
Share link (under the title) copies a URL that reopens the tool exactly as you have it. You can
also write links by hand: open a book example with ?example= and the tab with #tab, and add
any of the parameters below to change one setting, for example
?e=0.5&fx=0&fy=0&d=-2&dir=x#conics
or ?example=ch10-bresenham&algo=dda#pixels.
Values are plain numbers; where a fraction is useful (m=-3/4, e=5/3) type it as is. Write a
plus sign as %2B or leave it out (x0=3): a bare + in a URL means a space, which the tool
ignores. Settings not in the link take their defaults. The tabs are #conics, #reflector,
#pixels, #metrics, #angles, #line-circle and #viewport; an ?example= link without one
opens the example’s own tab.
| Parameter | Meaning | Example |
|---|---|---|
|
eccentricity |
|
|
the focus |
|
|
the directrix: |
|
|
conics view: |
|
|
slicing plane tilt θ and cone half-angle α, in degrees |
|
|
dish width (across) and depth |
|
|
number of rays, their angle off the axis (degrees), headlight mode ( |
|
|
the line’s start and end pixels |
|
|
|
|
|
which step to show (0 is the first; large shows all) |
|
|
the Lᵖ exponent, or |
|
|
the centre A and the point B |
|
|
A*: |
|
|
rim positions in degrees |
|
|
the fourth point W in degrees, or |
|
|
the line y = m·x + c |
|
|
a vertical line x = |
|
|
the circle’s centre and radius |
|
|
canvas width and height (px) and pixels per unit |
|
|
the world point at the centre of the canvas |
|
|
the world point to map |
|
The example= presets:
| Preset | What it shows |
|---|---|
The lab: focus at the origin, directrix x = −2, e = 0.8 — drag e through 1 |
|
x²/25 + y²/9 = 1 from its focus (4, 0) and directrix x = 25/4, e = 0.8 |
|
x²/9 − y²/16 = 1 from focus (5, 0), directrix x = 9/5, e = 5/3 |
|
x² = −12y: focus (0, −3), directrix y = 3 |
|
y = x²/4: focus (0, 1), directrix y = −1 |
|
A 30° cone sliced at 40°: an ellipse |
|
Sliced at 60° = 90° − 30°, parallel to the side: a parabola |
|
Sliced at 80°, through both nappes: a hyperbola |
|
A dish 60 cm across and 9 cm deep: the receiver at f = 25 cm |
|
A bulb at the focus makes a parallel beam |
|
Rays 5° off the axis no longer meet at one point |
|
The worked example (1, 1) → (8, 4), from step 0, with D |
|
The exercise (0, 0) → (5, 2), from step 0 |
|
The tie case (0, 0) → (4, 2): D = 0 twice; the two versions differ |
|
The all-octant version on (0, 0) → (10, 4) |
|
A steep line (0, 0) → (2, 5) |
|
Leftward and down: (3, 3) → (−2, 1) |
|
DDA on a near-horizontal line |
|
Anti-aliased on the same line |
|
A(1, 1) to B(5, 4): Euclidean 5, Manhattan 7, Chebyshev 4 |
|
p = 1: the unit circle is a diamond |
|
p = ∞: the unit circle is a square |
|
A* with 4 moves: Manhattan is exact and expands the fewest nodes |
|
A* with 8 moves: Manhattan overestimates and returns 26 moves where 24 will do |
|
The lab: A = 220°, B = 320°; drag V |
|
AB a diameter: Thales' right angle |
|
A cyclic quadrilateral: opposite angles add to 180° |
|
y = x + 1 meets x² + y² = 25 at (3, 4) and (−4, −3) |
|
The tangent 3x + 4y = 25 at (3, 4): Δ = 0 |
|
y = 7 − x meets the circle at (3, 4) and (4, 3) |
|
y = x + 8 misses: Δ < 0 |
|
800 × 600 at 50 px per unit: (3, 2) → (550, 200) |
|
(−8, −6) → the corner pixel (0, 600) |
|
640 × 480 at 20 px per unit: (−4, 3) → (240, 180) |
Opening a link replaces the settings this browser had saved for the tool; a Restore my settings button appears so you can undo that.
Feedback is a gift. Something to improve, a feature to add, or a bug? Tell me.
Runs entirely in your browser; nothing you type leaves this page.