Satellite Trajectory

Sample interactive satellite trajectory. The calculation is inaccurate, improvement is left as a challenge for the time being.

<?xml version="1.0" encoding="UTF-8" standalone="no" ?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd"> 
<svg width="1600" height="1000" xmlns="http://www.w3.org/2000/svg" 
onload="startup(evt)"  onmouseup="msup(evt)" onmousedown="msdn(evt)">

<defs>
  <linearGradient id="d_gradient" x1="100%" y1="100%" x2="0%" y2="0%">
    <stop offset="0%" style="stop-color:rgb(30,30,0);	stop-opacity:1"/>
    <stop offset="100%" style="stop-color:rgb(255,230,180);	stop-opacity:1"/>
  </linearGradient>
</defs>

<script><![CDATA[
  var SVGDoc = null;
  var SVGRoot = null;
  var Layer1 = null;
  var Layer2 = null;
  var Layer3 = null;
  var pxpos = 500.0;
  var pypos = 500.0;
  var pmass = 100.0;
  var sxpos = 500.0;
  var sypos = 150.0;
  var sxspeed = 3.0;
  var syspeed = 0.0;
  var gravity = 0.3;
  var xonplanet;
  var yonplanet;
  var count=0;
  var svgns = 'http://www.w3.org/2000/svg';
  var mousedn=0;
 
function startup(evt){
  SVGDoc = evt.target.ownerDocument;
  Layer1 = SVGDoc.getElementById("Layer1");
  Layer2 = SVGDoc.getElementById("Layer2");
  Layer3 = SVGDoc.getElementById("Layer3");
  t=setTimeout("tick()",50);
}

function tick(evt){
  Sat=SVGDoc.getElementById("Satellite");
  if ( count++%4 == 0){ 
    NewDot = SVGDoc.createElementNS(svgns,"circle");
    NewDot.setAttribute("id", "P"+count++);
    NewDot.setAttribute("cx", sxpos); 
    NewDot.setAttribute("cy", sypos); 
    NewDot.setAttribute("r", 2);  
    NewDot.setAttribute("opacity",0.7);
    NewDot.setAttribute("fill", "rgb(230,220,0)");
    Layer3.appendChild(NewDot);
  }
  dsqr=(pxpos-sxpos)*(pxpos-sxpos)+(pypos-sypos)*(pypos-sypos);
  F=(pmass*gravity)/dsqr;
  
  sxspeed=sxspeed+(pxpos-sxpos)*F;
  syspeed=syspeed+(pypos-sypos)*F;
  
  sxpos+=sxspeed;
  sypos+=syspeed;
  
  Sat.setAttribute("cx", sxpos);
  Sat.setAttribute("cy", sypos);
   
  t=setTimeout("tick()",50);
}

function msdn(evt){
  mousedn=1;
  Planet=SVGDoc.getElementById("Planet");
  xonplanet=evt.clientX-pxpos;
  yonplanet=evt.clientY-pypos;
}

function msup(evt){
  mousedn=0;
}

function pmsdrg(evt){
  if (mousedn == 1){
    Planet=SVGDoc.getElementById("Planet");
    pxpos=evt.clientX-xonplanet;
    pypos=evt.clientY-yonplanet;
    Planet.setAttribute("cx", pxpos);
    Planet.setAttribute("cy", pypos);
  }
}

]]></script> 

<rect x="0" y="0" width="100%" height="100%" fill="#101010"/> 
 <g id="Layer3">
 </g>
 <g id="Layer2">
   <circle cx="500" cy="150" r="4.0" id="Satellite" fill="#BBBB00">
   </circle> 
 </g>
 <g id="Layer1">
   <circle cx="500" cy="500" r="30.0" id="Planet" style="fill:url(#d_gradient)" onmousemove="pmsdrg(evt)">
   </circle>
 </g>
</svg> 
It will show up like (drag the planet):

alt : It seems your browser does not support SVG. Consider using Google Chrome or another SVG enabled browser

© Jan van der Meiden 2015