<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<!-- Copyright John B Stone -->
  <!-- Free for non-commercial use only -->

 <head>
   <title>Ship jumping in at 100 diameters</title>

  <style type="text/css">
      .hexBorder
      {
        stroke: darkgray;
        stroke-width: 1;
        fill: none;
      }
  </style>

 <script><![CDATA[ 
  var port, ship, l3,l4,l5, moon;
  var txtPort, txtShip, txtL3,txtL4,txtL5, txtMoon;

  var offset=0.0;
  var lastoffset=2.0;
  var lunarDays = 28.0;
  var x,y, angle;
  var tick = 0; // one tick per minute of the day
  var lunarTick = 0;
  var tickSize = 60; 	// one thousand times scale speed
  var downtick;
  var flashColor="yellow";
  var portColor="green";
  var shipColor="red";

var svgDocument, canvas, group;
var xAxis = 13;
var yAxis = 8;
var svgns = 'http://www.w3.org/2000/svg';

function drawHex (a, b)
{
  var x = a*86.6-318;
  var y = b*100 + a%2 * 50 - 400;
  var h;

  // create hex border
 

  h=svgDocument.createElementNS(svgns,'polygon');

  h.setAttributeNS(null, 'class', "hexBorder");
  h.setAttributeNS(null, 'points', "0,50 29,0 86.6,0 116.5,50 86.6,100 29,100");
  h.setAttributeNS(null, 'transform', "translate(" +x+ "," +y+ ")" );
  h.setAttributeNS(null, 'stroke-dasharray' , '1,5');
  group.appendChild(h);	// add it to this group
}

function drawHexGrid (evt)
{
  // create group item to attach elements to
  group = document.createElementNS("http://www.w3.org/2000/svg", "g");
  group.setAttributeNS(null, 'id', "hexGroup");

  // get canvas object to attach the group to
  canvas = svgDocument.getElementById("canvas");

  for (var a=0; a<xAxis; a++)
  {
    for (var b=0; b<yAxis; b++)
	drawHex(a, b);		// generate all the individual hexes
  }

  canvas.appendChild(group);	// add all the hexes to the canvas
}

  function animate(evt)
  { 
	if ( window.svgDocument == null )
		svgDocument = evt.target.ownerDocument;    

	drawHexGrid(evt);

	ship = svgDocument.getElementById("ship");
	port = svgDocument.getElementById("port");
	moon = svgDocument.getElementById("moon");
	l3   = svgDocument.getElementById("l3");
	l4   = svgDocument.getElementById("l4");
	l5   = svgDocument.getElementById("l5");

	txtMoon = svgDocument.getElementById("txtMoon");
	txtPort = svgDocument.getElementById("txtPort");

	txtL3   = svgDocument.getElementById("txtL3");
	txtL4   = svgDocument.getElementById("txtL4");
	txtL5   = svgDocument.getElementById("txtL5");

 	setTimeout("movement()", tickSize); 
  }

  function rotate(object, angle, label,  textXoffset, textYoffset)
  {
	if (angle < 0) angle+= 360;

	object.setAttributeNS(null, "transform", "rotate(" + angle + ")" );
	
//	label.setAttributeNS(null, "transform", "rotate(" + angle + ")" );
//	label.setAttributeNS(null, "x", object.getAttribute("cx") + textXoffset);
//	label.setAttributeNS(null, "y", object.getAttribute("cy") + textYoffset);
  }

  function movement() 
  {

	// move port along orbit

	portAngle=(tick/4);

	rotate(port, portAngle, txtPort, 5, -5)
/*
	// move things in lunar orbit 

	if (lunarTick++ > lunarDays * 1440) lunarTick=0;

	lunarAngle=(lunarTick/4/lunarDays);

	rotate(moon, lunarAngle, txtMoon, -20, -8);  
	rotate(l3,   lunarAngle, txtL3,    -8, -8); 
	rotate(l4,   lunarAngle, txtL4,    -8, -8); 
	rotate(l5,   lunarAngle, txtL5,    -8, -8); 
*/
	// flash port & ship every 10 ticks

	if (Math.floor(tick/10) % 2 == 0)
	{
		ship.setAttributeNS(null, "fill", shipColor); 
		port.setAttributeNS(null, "fill", flashColor); 	
	}
	else
	{
		ship.setAttributeNS(null, "fill", flashColor); 
		port.setAttributeNS(null, "fill", portColor); 	
	}

	// accelerate the ship

	if (tick < 192)
	{
		offset = tick*tick*0.011025;
		ship.setAttributeNS(null, "cx", 800-offset);
		lastoffset = offset;		
	}	
	else if (tick < 383)
	{	
		downtick = 382 - tick;
		offset = 402 - downtick*downtick*0.011025;
		ship.setAttributeNS(null, "cx", 401-offset);

	}
	else 
		ship.setAttributeNS(null, "fill", "none");		

	
	tick++;
	if (tick >= 1440) // start again
	{
		tick=0; 

		ship.setAttributeNS(null, "cx", 800);
		ship.setAttributeNS(null, "fill", "red");
	}

        setTimeout("movement()", tickSize); 
  }

  ]]></script>
 </head>

<body bgcolor="black" color="white">

<div style="position:relative;">

<svg id="canvas" onload="animate(evt)"
	xmlns="http://www.w3.org/2000/svg" version="1.1"
	viewBox="-300 -350 1200 850" 
	preserveAspectRatio="xMidYMid slice"
	style="width:100%; height:100%; top:0; left:0; ">

  <style type="text/css">
    line   {stroke:red;  stroke-width:1}
    text   {fill:white;}
  </style>

	<!-- Earth, Moon, lunar orbit and 100D -->

	<circle id="earth" cx="0" cy="0" r="8"  fill="blue"  />
	<circle cx="0" cy="0" r="240" fill="none" stroke-dasharray="7,7" stroke="yellow" stroke-width="1" />

	<circle id="moon" cx="0" cy="-240" r="4"  fill="yellow"  />
	<circle cx="0" cy="0" r="800" fill="none" stroke-dasharray="7,7" stroke="red" stroke-width="1" />

	<text x="-50" y="0">Earth</text>

	<text id="txtMoon" x="-20" y="-248">Moon</text>
	<text x="-240" y="200">Lunar orbit</text>
	<text x="680" y="150">100 Diameters</text>

	<!-- Lagrange points / colonies -->

	<circle id="l5" cx="208"  cy="-120" r="3" fill="cyan"/>	
	<circle id="l4" cx="-208" cy="-120" r="3" fill="cyan"/>
	<circle id="l3" cx="0"    cy="240"  r="3" fill="cyan"/>

	<text id="txtL3" x="-8"   y="232">L3</text>
	<text id="txtL4" x="-216" y="-128">L4</text>
	<text id="txtL5" x="200"  y="-128">L5</text>

	<!-- Highport and ship -->

	<circle cx="0" cy="0" r="26" fill="none" stroke-dasharray="7,7" stroke="green" stroke-width="1" />	
	<circle id="port" cx="26" cy="0" r="4" fill="green" />

	<text id="txtPort" x="30" y="5">Geostationary Highport</text>


	<circle id="jumpPoint" cx="800" cy="26" r="3" fill="white"/>
	<circle id="ship" cx="800" cy="26" r="6" fill="red"/>
	<text id="txtJP" x="750" y="15">Jump point</text>

	<text x="-50" y="300">Shown 1000 times normal speed (3.6 seconds of simulation = 1 hour of real time). Objects not to scale.</text> 
	<text x="-50" y="350">Each hex is 100,000 miles or ten space combat hexes across.</text> 

	<line x1="0" y1="26" x2="800" y2="26" stroke-dasharray="7,12"/> 	
	<text id="course" x="350" y="20">6.4 Hour Intercept Course at 1G</text>

 </svg>
</div>

<div style="position:relative; color:white;">

<p>Engineer: Jump bubble collapsing sir!</p>

<p>Captain: Red alert. All crew to stations. All systems to normal-space settings.  Point defence online. </p>

<p>Navigator: 1, 2, 3 radio beacons detected - triangulation complete. Transponder has been pinged. Target system positively identified. No surprises.</p>

<p>Captain (over Radio): "This is Free Trader Beowulf inbound from Nusku, requesting permission to approach."</p>

<p>Radio: This is Terran Space Traffic Control. Welcome home Beowulf. Adopt standard approach vector for Earth Highport.</p>

<p>Navigator: Course plotted. ETA 6 hours 24 minutes.</p>

<p>Captain: "Roger STC."  Engage. Stand down from red alert.</p>

<p>Captain (over Tannoy): "This is your captain speaking: Welcome to Terra.  We will be arriving at the highport in a little over 6 hours. For your acclimatisation we have set environmental and gravity controls to Terran standard.  I hope you enjoy your stay on Earth and thank you for travelling Beowulf spacelines. It has been a pleasure."</p>

</div>
</body>
</html>