<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<!-- Copyright © John B Stone -->
  <!-- Free for non-commercial use only -->

 <head>
   <title>Jump point changes over a year</title>

 <script><![CDATA[ 
  var port, ship;
  var offset=0.0;
  var lastoffset=402.0;
  var x,y, jumpY, angle;
  var z = 150.0;	// Earth orbit radius in mega km
  var tick = 0; 	// one tick per day
  var tickSize = 25	; 	// one million times scale speed

  function animate(evt)
  { 
	if ( window.svgDocument == null )
		svgDocument = evt.target.ownerDocument;    

	earth = svgDocument.getElementById("earth");
	jump  = svgDocument.getElementById("jump");

 	setTimeout("movement()", tickSize); 
  }

  function movement() 
  {
	angle=tick/180.0*Math.PI;	//convert to radians
	x=Math.cos(angle)*z;			// work out new x,y
	y=Math.sin(angle)*z;	


	// update Earth coordinates

	earth.setAttributeNS(null, "cx", x);	
	earth.setAttributeNS(null, "cy", y);	

	// update jump point coordinates

	jumpX=x;
	jumpY=y;

	if (x < 0)
	{
		if (y>0 && y < 140)
		{
			jumpY = 140;
			jumpX = 0;
		}
		else
		if (y<=0 && y > -140)
		{
			jumpY = -140;
			jumpX = 0;
		}
	}

	jump.setAttributeNS(null, "cx", jumpX+4);	
	jump.setAttributeNS(null, "cy", jumpY);


	tick++;
	if (tick >= 360) // start again
	{
		tick=0; 
	}

        setTimeout("movement()", tickSize); 
  }

  ]]></script>
 </head>

<body bgcolor="black" color="white">

<div style="position:relative;">

 <svg id="space" onload="animate(evt)"
	xmlns="http://www.w3.org/2000/svg" version="1.1"
	viewBox="-320 -240 640 480" 
	style="width:100%; height:100%; top:0; left:0; ">

  <style type="text/css">
    line   {stroke:red;  stroke-width:1}
    text   {fill:white;}
  </style>

  <g id="100D">

	<!-- Sol, Earth, Jump Shadow and 100Ds -->

	<rect x="-150" y="-140" width="150" height="280" fill="dimgray" stroke-width="1"/>
	<circle cx="0" cy="0" r="140" stroke-dasharray="7,7" stroke="yellow" stroke-width="1" fill="dimgray" />

	<circle cx="0" cy="0" r="150" fill="none" stroke-dasharray="7,7" stroke="blue" stroke-width="1" />
	
	<circle cx="0" cy="0" r="4"  fill="yellow"  />
	<circle id="jump" cx="154" cy="0" r="3"  fill="red"  />
	<circle id="earth" cx="150" cy="0" r="3"  fill="cyan"  />

	// key

	<circle cx="-235" cy="-185" r="3"  fill="red"  />
	<circle cx="-235" cy="-205" r="3"  fill="cyan"  />
	<text x="-220" y="-180">Optimal jump point</text>
	<text x="-220" y="-200">Earth</text>

	<circle cx="-235" cy="200" r="6" fill="none" stroke-dasharray="2,2" stroke="yellow" stroke-width="1" />
	<circle cx="-235" cy="180" r="6" fill="none" stroke-dasharray="2,2" stroke="blue" stroke-width="1" />

	<text x="-220" y="185">Earth orbit</text>
	<text x="-220" y="205">Sol 100 Diameters</text>

	<text x="100" y="200">Barnard's Star Direction &gt;</text>
	<text x="100" y="-200">Barnard's Star Direction &gt;</text>

	<text x="-60" y="-30">Sol's jump shadow</text>

	<text x="-85" y=" 40">and its effects over a year</text>
	<text x="-85" y=" 70">on the optimal jump point</text>

  </g>
 </svg>
</div>
</body>
</html>