Drawing orbits in 2D using html ellipse element

Marijn

Active member
Joined
Mar 5, 2008
Messages
755
Reaction score
166
Points
43
Location
Amsterdam
For a graphical representation of an orbit in 2D, I'd like to use the html SVG ellipse element. I am trying to achieve the same result as http://www.asterank.com/ (in the left pane).

Perhaps someone has already figured this out and could help me with this.

The example below is the (simplified) html for asteroid Ryugu. I am trying to calculate the numbers for drawing the ellipse based on the orbital elements as displayed below the diagram on the Asterank home page.

The semi-major axis, a, is given. The semi-minor axis b can be calculated using e. These numbers need to be multiplied by 50 (pixels) in order to get the values as in the example below.

W is used for the first param of the transform function.

So I am close. But I do not understand how cy is calculated. Also, I need to fit the inclination in somehow.

Can anybody help me to complete this calculation?

svg width="300" height="170"
ellipse rx="58.39395781893142"
ry="59.48004109924875"
cx="150"
cy="86.31463562865277"
transform="rotate(211.4258497031505, 150, 75)"
 

Marijn

Active member
Joined
Mar 5, 2008
Messages
755
Reaction score
166
Points
43
Location
Amsterdam
Ok, I found the answer. In case anyone is interested:

cy = eccentricity * semi-major axis * 50 + 75

50 is a scale factor (50px = 1AU) and 75 is the center of the y coordinate.

Completing the example for Ryugu: cy = 1.189545600425906 * 0.1902257533711703 * 50 + 75 = 86.314
 
Top