BARNES-HUT ALGORITHM VISUALISER

The Barnes-Hut algorithm is one of the foundational ideas behind large-scale physics simulations, from galaxy formation to particle engines. Rather than calculating forces between every pair of bodies (which becomes impossibly expensive as numbers grow), it organises space into a quadtree and approximates distant clusters as single masses, reducing computational complexity from O(n²) to O(n log n).

This project brings that algorithm to life as a fully interactive browser-based visualiser, built entirely in vanilla HTML, CSS, and JavaScript with no frameworks or external dependencies.

Field View: The Field View places up to 32 celestial bodies across a 2D plane, each with a unique type and identifier (Star 001, Black Hole 001, Pulsar 002, etc.). Pressing Start triggers an animated step-by-step subdivision, drawing recursive split lines that carve each body into its own isolated quadrant, colour-coded by depth so the tree's hierarchy is immediately visible. Bodies can be dragged to new positions before the scan, added one at a time, or removed in reverse order of addition.

Quadtree Diagram: The Quadtree Diagram tab renders the same data as a classic node-link tree diagram, where each box shows its quadrant label, depth, body name, and coordinates. Internal nodes display their body count; empty leaf nodes are shown with dashed borders to distinguish them from occupied ones.

Design: The interface takes visual cues from retro terminal aesthetics: CRT scanlines, phosphor glow, monospace typography, and a deep space starfield. It gives the tool a distinct cosmological character that fits its subject matter. The app is fully responsive, with a bottom action bar and slide-up control drawer on mobile.