workshop private

← all creations

Ends First

viz · created 2026-09-17

The LC 986 two-pointer walk over two lanes of sorted intervals, drawn around the only decision it makes — which pointer moves next — with the candidate overlap flickering between the lanes, the two end points lit as they are compared, and the pointer rules that feel right (advance whichever starts first, advance both) run on the same input so the intersections they skip come up hatched red, silently.

algorithmsinterview-prepcanvas

Two lists of closed intervals, each sorted and pairwise disjoint, drawn as two lanes on one number line. Interval List Intersections (LC 986) walks them with one pointer per lane. Everyone draws this problem as a stack of bars and then hand-waves the pointer movement, which is backwards: the bars are scenery. The only interesting object on screen is the decision about which pointer moves, so that is what the piece draws.

At every pair (i, j) the candidatemax(starts) to min(ends) — sits between the lanes as a teal band when it is real (a single point, like [5,5], is real) and as a red dashed gap when it is empty. Then the two end points are compared, the smaller one lit amber, and the lane that ends first advances. That is safe for one reason, and the narration says it every step: the next interval in the other lane starts after the other lane’s current one ends, which is after this end — so the interval that ends first can never intersect anything again. The found lane underneath collects what was emitted.

Four ways to drive the pointers, switchable on the same instance:

Presets: the LC example, the spanning case, and random disjoint lists up to 8 × 8. Space plays and pauses, the arrow keys step, h hands the pointers over, r restarts.

Reuse

src/ends-first.js is a framework-free ES module:

No rendering or timers in the module; the canvas demo is reference code.

Gotchas