Orbital equation where one body's mass is negligible wikipedia
According to the wikipedia page for angular momentum it can be found that it is equal to the length of the cross product of the difference in position and the difference in velocity
According to this wikipedia page, one can find an obscure thing called an eccentricity vector. It is a vector pointing from the apoapsis of the orbit to the periapsis with the magnitude of the eccentricity. It is calculated by
All parameters are known except $r$ and $\theta$, but the radius and angle must be projected onto the plane that the small body is orbiting on. This is the hardest part. There are many ways to do this but the one I derived is:
can be rotated around using the Rodrigues' rotation formula, which rotates a vector around a unit normal vector. Because the ecentricity vector also lies on the plane, is already a normal vector to it, it just needs to be normalised to a unit vector
The shadowing of the balls is just the cosine of the angle between the normal vector to the surface of the sphere on that point to the light source, the yellow ball. The cosine between -1 and 1 is limited to 0 as the minimum so everything below -1 is 0, then the value between 0 and 1 is scaled between the ambient light and the light under full exposure
The orbits aren't predetermined. They are randomly generated positions and velocities. They are the same when the page is reloaded since it uses the same seed, but the program is robust enough to handle any orbit.
The paths aren't exactly accurate because the simulation is run numerically, while the path prediction, the black line, is closed form. This is a minor prolem because the derivation is very efficient when translated to computer code. It runs at 5000 ticks every 1/30th of a second with a dt = 0.000005. The inaccuracy is most notable on the hyberbola after a while because of the way computers handle floating point numbers. When it gets to a large distance and tries to normalise, it looses a lot of accuracy when dividing then multiplying back by either really large or really small numbers. It is notable in the hyperbola messing up and in the really close orbit shaking a tiny bit when the cyan ball passes extremely close to the yellow ball.
The black lines are actually drawn pretty inefficently. Since the function is based on which is an angle the farther away portions of orbits get only a few points since they occupy less of the angle, you can see the far out parts of the elipses get jankey since they are drawn with fewer points. Also the lines are draw inefficiently as they are buffered into the GPU. The lines share their start and end points with each other, but when drawing it duplicates points in the buffer and then passes it to the GPU. The data passed to the GPU every frame could be basically halved in size by using indices, but for now it runs fine at least on my computer.