<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Can you put the moon into orbit?</title>
  <style>
    stop.begin { stop-color:yellow; }
    stop.end { stop-color:green; }
    body.invalid stop.end { stop-color:red; }
    #err { display:none; }
    body.invalid #err { display:inline; }
    legend {font-size: 1.5em};
    #number {color: #ff00ff;}
    strong {color: #ff9999; font-weight:bold;}
  </style>
<script><![CDATA[
        var rect;
        var x = 0;
        var y = -300;
        var br = 10;
        var x_speed=0;
        var y_speed=0;
        var speed = 50;
        var cx = 0;
        var cy = 0;
        var cr = 100;
        var launch_angle=0;
        var launch_force=0;
        var view=300;
        var height = 300;
        var zoom = 600;
        
        function check(n)
        {
          if (n==1)
          {
            height=cr+br;
            zoom=350;
          }
          if (n==2)
          {
            height=150;
            zoom=400;
          }
          if (n==3)
          {
            height=300;
            zoom=600;
          }
        }

        function processForm(form) {
        launch_angle=document.getElementById("angle").value;
        launch_force=document.getElementById("force").value;
        if (launch_force>50)
           launch_force=50;
        if (launch_force<-50)
           launch_force=-50;
        angler=(launch_angle)/180.0*Math.PI;
        x=0;
        y = -height;
        x_speed=Math.cos(-angler)*launch_force;
        y_speed=Math.sin(-angler)*launch_force;
        }

        
        function animate(evt) {
            if ( window.svgDocument == null )
                svgDocument = evt.target.ownerDocument;
            bill = svgDocument.createElementNS("http://www.w3.org/2000/svg","rect");
            bill.setAttributeNS(null, "x", "0");
            bill.setAttributeNS(null, "y", "0");
            bill.setAttributeNS(null, "width", "300");
            bill.setAttributeNS(null, "height", "300");
            bill.setAttributeNS(null, "stroke", "black");
            bill.setAttributeNS(null, "fill", "green");
            aim =  svgDocument.getElementById("aim");
            ball = svgDocument.getElementById("ball");
            circ = svgDocument.getElementById("circ");
            line = svgDocument.getElementById("line");
            ssvg = svgDocument.getElementById("ssvg");
            setTimeout("advance()", speed);
        }
        function press(evt) {
            y_speed=-y_speed;
        }
        function advance() {

            dist2 = (x*x)+(y*y);
            dist = Math.sqrt(dist2);
            theta = Math.atan2(y,x);
            plx1=Math.cos(theta)*(cr);
            ply1=Math.sin(theta)*(cr);
            if((x>5000)||(x<-5000)||(y>5000)||(y<-5000))
            {
              x_speed=0;
              y_speed=0;
            }
            if (dist<(cr+br))
            {
              theta2=(theta+Math.PI/2);

              xtemp=(x_speed*Math.cos(-theta2))-(y_speed*Math.sin(-theta2));
              ytemp=(y_speed*Math.cos(-theta2))+(x_speed*Math.sin(-theta2));
              ytemp=-ytemp*0.5;
              xtemp=xtemp*0.9;
              x_speed=(xtemp*Math.cos(theta2))-(ytemp*Math.sin(theta2));
              y_speed=(ytemp*Math.cos(theta2))+(xtemp*Math.sin(theta2));
              x=Math.cos(theta)*(cr+br);
              y=Math.sin(theta)*(cr+br);
              //ball.setAttributeNS(null, "fill", "blue");
            }
            x_speed=x_speed-Math.cos(theta)*(7000/dist2);
            y_speed=y_speed-Math.sin(theta)*(7000/dist2);
            y=y+y_speed;
            x=x+x_speed;
            if (view<zoom)
              view=view+5;
            if (view>zoom)
              view=view-5;
            ball.setAttributeNS(null, "cx", x+cx);
            ball.setAttributeNS(null, "cy", y+cy);
            circ.setAttributeNS(null, "cx", cx);
            circ.setAttributeNS(null, "cy", cy);
            aim.setAttributeNS(null, "cy", cy-height);
           // ssvg.setAttributeNS(null, "viewBox", "-"+view+" -"+view+" "+(view*2)+" "+(view*2));
           ssvg.setAttributeNS(null, "viewBox", "-"+zoom+" -"+zoom+" "+(zoom*2)+" "+(zoom*2));
            setTimeout("advance()", speed);
      }
    ]]></script>
</head>
<body id="top">
<div id="body"
   style="position:absolute; z-index:0; border:1px solid black; left:10%; top:5%; width:80%; height:90%;">
  <form name="myform" style="padding: 20px;" METHOD="GET">


       <legend>How Did The Moon Get Into Orbit?</legend>




<p>
<a href="#body2" style="font-size: 1.5em;">Instructions</a><br/><br/>
 Start Position<br />

 <input type="radio"
   name="level" onclick="check(this.value)"
   value="3" checked="checked"/> Outer space <br/>
 <input type="radio"
   name="level" onclick="check(this.value)"
   value="1"/> Ground level <br/>
 <input type="radio"
   name="level" onclick="check(this.value)"
   value="2"/> Orbit level <br/>
 </p>
       <p> <label>Launch angle</label><br/>
          <input id="angle" name="angle" value="0" type="text"/></p>
       <p> <label>Launch force</label><br/>
          <input id="force" name="force" value="0" type="text"/></p>
       <p><button type="button" onclick="processForm(this.form);">Launch!</button></p>
<!--<div id="ads" style="position:absolute; z-index:0; right:5%; top:5%; border:0; text-align:center;">
<a href="http://edinburghcreationgroup.org/naturalism.php" style="border: 0;"><img style="border: 2px solid #307;" src="/images/darwin-spirit3.jpg"/></a><br/>or<br/><a href="gospel.html" style="border: 0;"><img style="border: 2px solid #307;" src="/images/god.png"/></a>
<object data="adtwo.html" type="text/html" style="width: 120px; height: 240px">
</object>
<object data="privilaged.html" type="text/html" style="width: 120px; height: 240px">
</object>
</div>--><br/>
<div style="position:absolute; z-index:0; right:5%; bottom:5%; border:0; text-align:center;">
<a href="http://www.spreadfirefox.com/?q=affiliates&amp;id=0&amp;t=78"><img border="0" alt="Get Firefox!" title="Get Firefox!" src="http://sfx-images.mozilla.org/affiliates/Buttons/120x60/get.gif"/></a>
<br/>Site designed by:<br/> <a href="http://deepwidemedia.net">deepwidemedia.net</a></div>


<svg id="ssvg" onload="animate(evt)"
  xmlns="http://www.w3.org/2000/svg" version="1.1"
    viewBox="-600 -600 1200 1200" preserveAspectRatio="xMidYMid slice"
    style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
    <defs>
    <radialGradient id="grad1" cx="25%" cy="25%" r="400%">
      <stop offset="0%" stop-color="white"/>
      <stop offset="100%" stop-color="black"/>
    </radialGradient>
    <radialGradient id="grad2" cx="25%" cy="25%" r="100%">
      <stop offset="0%" stop-color="yellow"/>
      <stop offset="100%" stop-color="#66ff00"/>
    </radialGradient>
    <radialGradient id="grad3" cx="50%" cy="50%" r="44%">
      <stop offset="0%" stop-color="#9999ff"/>
      <stop offset="100%" stop-color="white"/>
    </radialGradient>
    </defs>

    <circle fill="url(#grad3)" stroke="none" cx="0" cy="0" r="150"/>
    <circle id="aim" fill="#aaaaaa" stroke="none" cx="0" cy="-300" r="10"/>
    <circle id="circ" fill="url(#grad2)" stroke-width="2" stroke="black" cx="0" cy="0" r="100"/>
    <circle id="ball" fill="url(#grad1)" stroke-width="2" stroke="black" cx="0" cy="-300" r="10"/>
    <circle fill="none" stroke="#ffaaaa" stroke-width="2" stroke-dasharray="7,4" cx="0" cy="0" r="150"/>
</svg>


  </form>
</div>


<div id="body2"
   style="position:absolute; z-index:0; border:1px solid black; left:10%; top:100%; width:76%; padding:2%;">
<legend>Instructions</legend>
<div style="-moz-column-width:20em; -moz-column-gap:2em;">

<p>Some scientists think the moon was formed when the Earth's gravity pulled space
dust together into a ball. Others think a lump of matter was passing the earth
and it was captured into orbit. Still others would say a comet smashed into the
earth causing the earth to squirt lava into space with exactly the right force
to put it into orbit.</p>

<p>Now thanks to SVG and a bit of JavaScript you can have a go at putting the moon
into orbit with this simulation of Newtonian gravity. The big circle represents
the Earth the small one the moon. The grey circle represents the start position
of the moon. The dashed red circle represents the orbit we are trying to get the
moon into.</p>

<p><img src="http://philholden.me.uk/images/outer.png" style="float:right;"/>Some people think the moon came from outer space and as it approached the Earth
at the correct speed and angle it was pulled into its present almost circular
orbit. To test this theory click the <strong>outer space button</strong>. The launch angle is
measured in degrees with zero being parallel to the Earths surface. You should
never need a force more than <strong>10 units</strong> (you can use a decimal point if you
want). Try a launch angle of <strong>-35&#176;</strong> then adjust the force until the moon
just grazes the dashed red line. What happens? Can you get the moon into the
lower circular orbit? You can try any angle and force you like. <a href="#top">Top</a></p>

<p>You cannot get the moon into an orbit that is lower than its starting position
because the nature of every orbit is that the object must return to the place
where it started. So if the moon starts in outer space it wants to return there.
The only circular orbit you can get the moon into from outer space is an orbit
that is in outer space. Try a launch angle of zero and a launch force of <strong>4.83</strong>. <a href="#top">Top</a><p>

<p><img src="http://philholden.me.uk/images/inner.png" style="float:right;"/>Other people think the moon was formed when an asteroid smashed into the earth
sending lava into space with the correct force so that when it solidified it
became the orbiting moon. Let's give that a try. Click the <strong>ground button</strong>. Now
to simulate a comet just grazing the Earth lets try a launch angle of <strong>3&#176;</strong>.
Adjust the force until the moon just grazes the red orbital path (somewhere
between <strong>8 and 10 units</strong>). Can you get the moon into orbit from the ground? Why
not? Try any angle and force? <a href="#top">Top</a></p>

<p>The problem is the same as outer space. Namely because every orbit is either
circular or elliptical it always returns to its starting position. If it starts
on the ground and follows an elliptical path it will end up on the ground.</p>

<p>Some people think the moon was formed by space dust clumping together. But this
begs the question, how did the space dust get into orbit? Where did each
particle come from outer space or Earth? Introducing more particles does not
solve the problem it just gives you more problems.</p>

<p><img src="http://philholden.me.uk/images/orbit.png" style="float:right;"/>If you want to get the moon to follow the red orbital path then you have to
start it somewhere on the red orbital path. Now click the <strong>orbit level</strong> button
and see if you can get the moon into orbit. <a href="#top">Top</a></p>

<p>Did you manage? Not too hard when
you can start it in the right place.</p>

</p>I discovered this stuff for myself when I was writing a network java game called
"Interplanetary Marbles" it was a bit like Tanks but throwing marbles between
planets (perhaps I should do an AJAX version). No matter how hard I tried I
could not throw my marble into orbit.</p>

<p>There are some people who think that the moon was actually placed into orbit.
It neither came from the Earth or outer space. It began its journey in a circle
on the circle. But they are just unscientific aren't they?</p>


<div id="ads" style="text-align: right">
<!--<object data="privilaged.html" type="text/html" style="width: 120px; height: 240px"></object>
<object data="unlocking.html" type="text/html" style="width: 120px; height: 240px">
</object>--></div>
</div>
</div>

</body>
</html>
