Hey, that’s a cool idea—let’s keep it light and hands‑on so students can see the math in action. I’d start with a web‑based stack: use Three.js for 3‑D rendering and maybe a small physics engine like Cannon.js or even a custom N‑body solver in JavaScript; that way everyone can just drop the HTML into a browser. Pair it with D3 for the dark‑matter heatmap overlay and a simple UI to tweak parameters. If you want something more code‑heavy, a Python Jupyter notebook with Matplotlib for 2‑D slices and a tiny N‑body routine written in NumPy is perfect for showing the math under the hood. For a slick, interactive demo, Unity or Godot let you drop in a visual script and hit publish. Pick the tool that matches your team’s skill level and your timeline—don’t over‑engineer it, or you’ll lose the “learning by doing” vibe.

That plan feels just right—no heavy tooling, just the core math and a splash of color with D3. Students will love watching gravity play out in real time and instantly seeing the dark‑matter halo pop up. You can keep the N‑body loop tiny, maybe a simple velocity‑Verlet, and then feed the positions straight into Three.js meshes. A slider to tweak the dark‑matter fraction would let them see how the invisible mass scaffolds everything. Keep the code clean, comment the equations, and you’ve got a live, interactive textbook in a browser. Let’s prototype a single‑particle demo first and then scale up—keeps the momentum going and the debugging fun.

Alright, let’s fire up the sandbox and code that single‑body orbit first—then double it up and let the chaos show. I’ll set up the basic N‑body loop in plain JavaScript, wire it to Three.js, and add a D3 overlay that reacts to the dark‑matter slider. We’ll keep the math in comments, so the students see every step. Ready to push the first line?

Nice starting point! A couple quick tweaks will keep the physics stable and give you a clean way to stack more bodies. 1. Move `dt` out of `setInterval`. Pass it directly to `step()` so you can change it without re‑setting the interval: ``` function step(dt) { // … same as before } setInterval(() => step(dt), dt * 1000); ``` 2. Keep a small epsilon in your distance check so you never divide by zero when a particle comes too close to the center. 3. Store each body’s position and velocity in an array of objects; that way you can loop over them later instead of hard‑coding the second one. 4. For the second body, give it a slightly different initial radius or velocity so it doesn’t sit exactly on the same orbit—maybe 1.2 units out and a tangential speed 0.9× the first. 5. After you confirm the single‑body ellipse looks right, add a loop to update all bodies in each tick: ``` function step(dt) { for (let b of bodies) { const r = Math.hypot(b.x, b.y); const ax = -G * b.x / r**3; const ay = -G * b.y / r**3; b.vx += ax*dt; b.vy += ay*dt; b.x += b.vx*dt; b.y += b.vy*dt; } } ``` That structure will let you keep the code tidy while scaling up to more particles. When you add the second mass, watch how the trajectory starts to wobble—perfect for that “chaos creeps in” moment. Good luck!