<!DOCTYPE html>

<!--
	different average accelerations with same average velocity
-->
<!--
    Space Collisions, copyright 2014, Michael Faleski
    
    Permission is hereby granted, free of charge, to any person obtaining a copy of 
    this software and associated data and documentation (the "Software"), to deal in 
    the Software without restriction, including without limitation the rights to 
    use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
    of the Software, and to permit persons to whom the Software is furnished to do 
    so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all 
    copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
    INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
    PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR 
    ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 
    OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 
    OTHER DEALINGS IN THE SOFTWARE.

    Except as contained in this notice, the name of the author shall not be used in 
    advertising or otherwise to promote the sale, use or other dealings in this 
    Software without prior written authorization.


    Modifications to the guts of the program were made October 31, 2015 by
    Michael Faleski to make a space collisions.
-->
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=640">
    <title>"Space" Collisions</title>
<style>
        .customButton {     /* style a link as a push-button */
            display: inline-block; 
            width: 60px; 
            height: 24px; 
            line-height: 24px; 
            font-size: 15px; 
            font-family: sans-serif; 
            text-align: center;
            color: black; 
            background: -webkit-linear-gradient(white,#eeeeee,#eeeeee,#e0e0e0);
            background: linear-gradient(white,#eeeeee,#eeeeee,#e0e0e0);
            text-decoration: none; 
            border: 1px solid gray; 
            border-radius: 5px;
            -webkit-user-select: none;
            -moz-user-select: -moz-none;
            -ms-user-select: none;
            user-select: none;
            cursor: pointer;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }
        .customButton:active {
            background: -webkit-linear-gradient(#909090,#808080,#808080,#707070);
            background: linear-gradient(#909090,#808080,#808080,#707070);
        }
        input[type="range"] {
            width: 200px;
            padding: 0px;       /* remove extra space in IE */
            -webkit-user-select: none;
            -moz-user-select: -moz-none;
            -ms-user-select: none;
            user-select: none;
        }
        input[type="range"]::-ms-tooltip {
            display: none;          /* hide automatic readout in IE */
        }
        input[type="range"]::-ms-track {
            color: transparent;     /* hide tick marks in IE */
        }   
</style>
</head>


<body style="font-family:sans-serif; font-size:15px; width:1300px; 
        margin-left:auto; margin-right:auto; background-color:#c0c0c0;">

    <h1 style="font-size:24px; text-align:center;">"Space" Collisions</h1>


    <div style="width:900px; float:left; margin-right:10px;">
    <img src="Background4.jpg" width="900" height="600" style="position:absolute">
      <canvas id="theTrailcanvas" width="900" height="600" style="position:absolute;"></canvas>
        <canvas id="theCanvas" width="900" height="600" style="position:relative;">
            Canvas not supported; please update your browser.
        </canvas>
    </div>

    <div style="width=400px; float:left; text-align:right;">

        <input type="button" id="RunButton" value="Run" onclick="startStop();">
	<input type="button" id="TracePathButton" value="Trace c.o.m." onclick="TracePath();">
<!--	<input type="button" id="SwitchFrames" value="Rest Frame" onclick="ShowFrame();">  -->
	<input type="button" id="Fixedinplace" value="Free Stick" onclick="FixStick();">
        <input type="button" id="ResetButton" value="Reset" onclick="Reset();">
<br>

<br>
        Ball Speed: <span id="BallSpeedReadout"style="display:inline-block; width:2:3em; text-align:right">2.50</span> m/s
        <input type="range" id="BallSpeedSlider" min="0" max="5.0" step="0.01" value="2.50" 
                oninput="showBallSpeed();" onchange="showBallSpeed();">
<br>
        Ball Mass: <span id="BallMassReadout" style="display:inline-block; width:2:3em; text-align:right">1.25</span> kg
        <input type="range" id="BallMassSlider" min="0.01" max="2.50" step="0.01" value="1.25" 
                oninput="showBallMass();" onchange="showBallMass();">
<br>
        Stick Mass: <span id="StickMassReadout" style="display:inline-block; width:2:3em; text-align:right">1.25</span> kg
        <input type="range" id="StickMassSlider" min="0.01" max="2.50" step="0.01" value="1.25" 
                oninput="showStickMass();" onchange="showStickMass();">
<br>
        Stick Length: <span id="StickLengthReadout" style="display:inline-block; width:2:3em; text-align:right">2.00</span> m
        <input type="range" id="StickLengthSlider" min="1.00" max="3.00" step="0.01" value="2.00" 
                oninput="showStickLength();" onchange="showStickLength();">
<br>
        Impact location: <span id="ImpactReadout"style="display:inline-block; width:2:3em; text-align:right">0.00</span> 
        <input type="range" id="ImpactSlider" min="-1.00" max="1.00" step="0.01" value="0.00" 
                oninput="showImpact();" onchange="showImpact();">
<br>
        Fixed point location: <span id="FixedPointReadout"style="display:inline-block; width:2:3em; text-align:right">0.00</span>
        <input type="range" id="FixedPointSlider" min="-1.00" max="1.00" step="0.01" value="0.00" 
                oninput="showFixedPoint();" onchange="showFixedPoint();">
<hr>

<b><center>Information</center><hr></b>
Fixed point:	&nbsp<span id="FIXY" style="display:inline-block; width:2:3em; text-align:left">NA </span>&nbsp &nbsp m<br><br>

Ball X position:  &nbsp<span id="BallX" style="display:inline-block; width:2:3em; text-align:left">0.000 </span>&nbsp &nbsp m<br>
Ball Y position:     &nbsp<span id="BallY" style="display:inline-block; width:2:3em; text-align:left">0.000 </span>&nbsp &nbsp m<br>
<br>
C.O.M. X position:  &nbsp<span id="COMX" style="display:inline-block; width:2:3em; text-align:left">0.000 </span>&nbsp &nbsp m<br>
C.O.M. Y position:     &nbsp<span id="COMY" style="display:inline-block; width:2:3em; text-align:left">0.000 </span>&nbsp &nbsp m<br>
<br>
Stick c.o.m. X position:  &nbsp<span id="StickX" style="display:inline-block; width:2:3em; text-align:left">0.000 </span>&nbsp &nbsp m<br>
Stick c.o.m. Y position:     &nbsp<span id="StickY" style="display:inline-block; width:2:3em; text-align:left">0.000 </span>&nbsp &nbsp m<br>
<br>
Ball X velocity:  &nbsp<span id="BallVx" style="display:inline-block; width:2:3em; text-align:left">0.000 </span>&nbsp &nbsp m/s<br>
Ball Y velocity:     &nbsp<span id="BallVy" style="display:inline-block; width:2:3em; text-align:left">0.000 </span>&nbsp &nbsp m/s<br>
Ball speed:     &nbsp<span id="Ballspeed" style="display:inline-block; width:2:3em; text-align:left">0.000 </span>&nbsp &nbsp m/s<br>
<br>
C.O.M. X velocity:  &nbsp<span id="COMVx" style="display:inline-block; width:2:3em; text-align:left">0.000 </span>&nbsp &nbsp m/s<br>
C.O.M. Y velocity:     &nbsp<span id="COMVy" style="display:inline-block; width:2:3em; text-align:left">0.000 </span>&nbsp &nbsp m/s<br>
C.O.M speed:        &nbsp<span id="COMspeed" style="display:inline-block; width:2:3em; text-align:left">0.000 </span>&nbsp &nbsp m/s<br>
<br>
Stick c.o.m. X velocity:  &nbsp<span id="StickVx" style="display:inline-block; width:2:3em; text-align:right">0.000 </span>&nbsp &nbsp m/s<br>
Stick c.o.m. Y velocity:     &nbsp<span id="StickVy" style="display:inline-block; width:2:3em; text-align:right">0.000 </span>&nbsp &nbsp m/s<br>
Stick c.o.m. speed:        &nbsp<span id="Stickspeed" style="display:inline-block; width:2:3em; text-align:left">0.000 </span>&nbsp &nbsp m/s<br>
<br>
Moment of Inertia (fixed pt or c.o.m.):  &nbsp<span id="MomentofI" style="display:inline-block; width:2:3em; text-align:right">0.000 </span>&nbsp &nbsp kg m<sup>2</sup><br>
Linear Momentum c.o.m. (total):		&nbsp<span id="Linearmom" style="display:inline-block; width:2:3em; text-align:right">0.000 </span>&nbsp &nbsp kg m/s<br>
Linear Momentum c.o.m. (x comp):	&nbsp<span id="Linearmomx" style="display:inline-block; width:2:3em; text-align:right">0.000 </span>&nbsp &nbsp kg m/s<br>
Linear Momentum c.o.m. (y comp):	&nbsp<span id="Linearmomy" style="display:inline-block; width:2:3em; text-align:right">0.000 </span>&nbsp &nbsp kg m/s<br>
Angular Momentum (fixed pt or c.o.m.):	&nbsp<span id="Angularmom" style="display:inline-block; width:2:3em; text-align:right">0.000 </span>&nbsp &nbsp kg m<sup>2</sup>/s<br>
omega : &nbsp<span id="omegaafter" style="display:inline-block; width:2:3em; text-align:right">0.000 </span>&nbsp &nbsp rad/s<br>
<hr>
Time of simulation: <span id="timing" style="display:inline-block; width:2:3em; text-align:right">0.000 </span> s<br><br><br><br><br><br><br><br><br><hr>

    </div>
<p>
    <script>

        var theCanvas = document.getElementById("theCanvas");
        var theContext = theCanvas.getContext("2d");
        var theTrailcanvas = document.getElementById("theTrailcanvas");
        var theContextual = theTrailcanvas.getContext("2d");

	var timing = document.getElementById("timing");

        var BallSpeedSlider = document.getElementById("BallSpeedSlider");
        var BallSpeedReadout = document.getElementById("BallSpeedReadout");

        var BallMassSlider = document.getElementById("BallMassSlider");
        var BallMassReadout = document.getElementById("BallMassReadout");

        var StickMassSlider = document.getElementById("StickMassSlider");
        var StickMassReadout = document.getElementById("StickMassReadout");

        var StickLengthSlider = document.getElementById("StickLengthSlider");
        var StickLengthReadout = document.getElementById("StickLengthReadout");

        var ImpactSlider = document.getElementById("ImpactSlider");
        var ImpactReadout = document.getElementById("ImpactReadout");

        var FixedPointSlider = document.getElementById("FixedPointSlider");
        var FixedPointReadout = document.getElementById("FixedPointReadout");

	var FIXY = document.getElementById("FIXY");
	var BallX = document.getElementById("BallX");
	var BallY = document.getElementById("BallY");
	var timing = document.getElementById("timing");
	var COMX = document.getElementById("COMX");
	var COMY = document.getElementById("COMY");
	var StickX = document.getElementById("StickX");
	var StickY = document.getElementById("StickY");
	var BallVx = document.getElementById("BallVx");
	var BallVy = document.getElementById("BallVy");
	var Ballspeed = document.getElementById("Ballspeed");
	var COMVx = document.getElementById("COMVx");
	var COMVy = document.getElementById("COMVy");
	var COMspeed = document.getElementById("COMspeed");
	var StickVx = document.getElementById("StickVx");
	var StickVy = document.getElementById("StickVy");
	var Stickspeed = document.getElementById("Stickspeed");
	var Angularmom = document.getElementById("Angularmom");
	var Linearmom = document.getElementById("Linearmom");
	var Linearmomx = document.getElementById("Linearmomx");
	var Linearmomy = document.getElementById("Linearmomy");
	var MomentofI = document.getElementById("MomentofI");

	var Fixstick=false;
	var paused = 0;
	var ytop= -Number(StickLengthSlider.value)/4*100 + theCanvas.height/2;
	var ybot= Number(StickLengthSlider.value)/4*100 + theCanvas.height/2;
	var xtop= theCanvas.width/2;
	var xbot= theCanvas.width/2;
	var fixedtime = 0;
	var tracepath = false;


	var actualx=25/100;
	var actualy=Number(ImpactSlider.value)*Number(StickLengthSlider.value)/2;
	var actualvx=Number(BallSpeedSlider.value), actualy=0;
        var ballmovex=0, ballmovey=0;			    // velocity for stream
        var timer;                                  // for animation timing
	var running=false;
	var collision = false;
	var counter=0;
        
	function startStop() {
            running = !running;
            if (running) {
		RunButton.value = "Pause";
		UpdatePicture();    
		}
            else {
                RunButton.value = "Run";
	        paused = 1;
            }
        }

        function showBallMass() {
            BallMassReadout.innerHTML = Number(BallMassSlider.value).toFixed(2);
	    UpdatePicture();
 	}
        
	function showBallSpeed() {
            BallSpeedReadout.innerHTML = Number(BallSpeedSlider.value).toFixed(2);
	    UpdatePicture();
        }

	function showStickMass() {
            StickMassReadout.innerHTML = Number(StickMassSlider.value).toFixed(2);
	    UpdatePicture();
        }

	function showStickLength() {
            StickLengthReadout.innerHTML = Number(StickLengthSlider.value).toFixed(2);
	    if(Fixstick){
	    FIXY.innerHTML=Number((Number(FixedPointSlider.value)*Number(StickLengthSlider.value)*100/2)/100).toFixed(3);
		}
	    UpdatePicture();
        }
	function showImpact() {
            ImpactReadout.innerHTML = Number(ImpactSlider.value).toFixed(2);
	    UpdatePicture();
        }

	function showFixedPoint() {
            FixedPointReadout.innerHTML = Number(FixedPointSlider.value).toFixed(2);
	    FIXY.innerHTML=Number((Number(FixedPointSlider.value)*Number(StickLengthSlider.value)*100/2)/100).toFixed(3);
	    UpdatePicture();
        }


 	function Reset() {

	    counter=0;
            theContext.clearRect(0, 0, theCanvas.width, theCanvas.height);
	    collision = false;
	    actualx=25/100;
	    actualy=Number(ImpactSlider.value)*Number(StickLengthSlider.value)/2;
	    paused=0;
	    Linearmomy.innerHTML=Number(0).toFixed(3);
	    counter=0;
            RunButton.value = "Run";
	    running=false;
	    
	    	timing.innerHTML = Number(counter).toFixed(3);
            	theContextual.clearRect(0, 0, theCanvas.width, theCanvas.height); 
	        omegaafter.innerHTML=Number(0).toFixed(3);

		<!-- if(tracepath) TracePath();   -->
	    UpdatePicture();

	    resetVals = true;
	    
        }

        function UpdatePicture() {

            window.clearTimeout(timer);
 
	    var bx, by, stkx, stky, bvx, bvy, mb, mas, bs;
	    var metersPerPixel = 10 /(0.177 *theCanvas.height);
            var dt = 0.02;                     // time step in seconds
	    var direc, tof, muob, muobcomp;	// direction of friction and type of friction
	    var gamma, delta, beta, muk, mus, angacccheck, pixelX;
	    var ballspeed=Number(BallSpeedSlider.value); impact=0; sticklength=0;
	    var ballmass=Number(BallMassSlider.value); stickmass=Number(StickMassSlider.value);
	    var sticklength = Number(StickLengthSlider.value);
	    var cmx, cmy;
	    
	    var omega=0, aminit, moi=0;

	    if(!running && paused==0){

	   	 theContext.clearRect(0, 0, theCanvas.width, theCanvas.height); 

		 cmy = (ballmass*Number(ImpactSlider.value)*sticklength/2)/(stickmass+ballmass);

	    
	   	 if(Fixstick){
			    theContext.beginPath();
       			    theContext.moveTo(theCanvas.width/2, sticklength/2*100 + theCanvas.height/2);               
       	     		    theContext.lineTo(theCanvas.width/2, -sticklength/2*100 + theCanvas.height/2); 
	       	     	    theContext.strokeStyle = "#ff00ff";     // magenta
       		     	    theContext.lineWidth = 6;
       	     		    theContext.stroke();
			    theContext.closePath();

		    	    cmx = (ballmass*25/100+stickmass*Number(theCanvas.width/100/2))/(stickmass+ballmass);

	   		    StickY.innerHTML=Number(0).toFixed(3);
			    StickX.innerHTML=Number(theCanvas.width/100/2).toFixed(3);
			}
		    else{
			    theContext.beginPath();
       			    theContext.moveTo(theCanvas.width/9*2, sticklength/2*100 + theCanvas.height/2);               
       	     		    theContext.lineTo(theCanvas.width/9*2, -sticklength/2*100 + theCanvas.height/2); 
       	    	 	    theContext.strokeStyle = "#ff00ff";     // magenta
       	     		    theContext.lineWidth = 6;
       	     	    	    theContext.stroke();
		   	    theContext.closePath();

			    cmx = (ballmass*25/100+stickmass*Number(theCanvas.width/100/9*2))/(stickmass+ballmass);

			    StickY.innerHTML=Number(0).toFixed(3);
			    StickX.innerHTML=Number(theCanvas.width/100/9*2).toFixed(3);
	      		  }

            theContext.strokeStyle = "yellow";     // magenta
	    theContext.beginPath();
            theContext.arc(25, theCanvas.height/2 - Number(ImpactSlider.value)*sticklength/2*100, 2, 0, 2*Math.PI, false);
            theContext.fillStyle = "yellow";
	    theContext.lineWidth=2;
            theContext.fill();
            theContext.stroke();
	    theContext.closePath();

	    BallY.innerHTML=(Number(ImpactSlider.value)*sticklength/2).toFixed(3);
	    BallX.innerHTML=Number(25/100).toFixed(3);
	    BallVx.innerHTML=Number(BallSpeedSlider.value).toFixed(3);
	    BallVy.innerHTML=Number(0).toFixed(3);
	    Ballspeed.innerHTML=(Number(BallSpeedSlider.value)).toFixed(3);

	    actualx=25;
	    actualy=Number(theCanvas.height/2)-Number(ImpactSlider.value)*sticklength*100/2;
	    actualvx=ballspeed*100;



	    COMX.innerHTML=(Number(cmx)).toFixed(3);
 	    COMY.innerHTML=(Number(cmy)).toFixed(3);

	    COMVx.innerHTML=(Number(ballmass*ballspeed)/(ballmass+stickmass)).toFixed(3);
 	    COMVy.innerHTML=(Number(ballmass* 0 )/(ballmass+stickmass)).toFixed(3);
	    COMspeed.innerHTML=(Number(ballmass*ballspeed)/(ballmass+stickmass)).toFixed(3);
	    StickVx.innerHTML=(Number(0)).toFixed(3);
 	    StickVy.innerHTML=(Number(0)).toFixed(3);
	    Stickspeed.innerHTML=(Number(0)).toFixed(3);

	    Linearmom.innerHTML=(Number(ballmass*ballspeed)).toFixed(3);
	    Linearmomx.innerHTML=(Number(ballmass*ballspeed)).toFixed(3);

	    if(!Fixstick){
	    Angularmom.innerHTML=((ballmass+stickmass)*(Number(ballmass*ballspeed)/(ballmass+stickmass)) * ((Number(ballmass* (Number(ImpactSlider.value)*sticklength/2) )/(ballmass+stickmass))-(Number(ImpactSlider.value)*sticklength/2))).toFixed(3);
	    MomentofI.innerHTML = (stickmass*sticklength*sticklength*(1/12)+stickmass*cmy*cmy + ballmass*(cmy-Number(BallY.innerHTML))*(cmy-Number(BallY.innerHTML))).toFixed(3);
		}
	    else {
	    Angularmom.innerHTML=((ballmass+stickmass)*(Number(ballmass*ballspeed)/(ballmass+stickmass)) * ((Number(FixedPointSlider.value)-Number(ImpactSlider.value))*sticklength/2)).toFixed(3);
	    MomentofI.innerHTML= (stickmass*sticklength*sticklength*((1/12)+Number(FixedPointSlider.value)*Number(FixedPointSlider.value)/4) + ballmass*(Number(FixedPointSlider.value)-Number(ImpactSlider.value))*(Number(FixedPointSlider.value)-Number(ImpactSlider.value))*sticklength*sticklength/4).toFixed(3);

		}



	    if(Fixstick && !collision){

	<!-- Showing the pivot point on the stick -->

	    	theContext.beginPath();
                theContext.lineWidth = 1;
                theContext.strokeStyle = "#ffffff";     // magenta
            	theContext.fillStyle = "#ffffff";
            	theContext.arc(theCanvas.width/2, -Number(FixedPointSlider.value)*sticklength/2*100 + theCanvas.height/2, 2, 0, 2*Math.PI, false);
            	theContext.fill();
            	theContext.stroke();
		theContext.closePath();


		}

<!-- end of not running piece!  -->
	}












<!-- Now for updating the values in "real time" -->	

	if(running){
	timing.innerHTML = Number(counter*dt).toFixed(3);
	counter++;
	
<!--  The c.o.m. marker -->


	if(!collision){
		if(!tracepath){
	   	    theContext.clearRect(0, 0, theCanvas.width, theCanvas.height); 
	   	 if(Fixstick){
			    theContext.beginPath();
       			    theContext.moveTo(theCanvas.width/2, sticklength/2*100 + theCanvas.height/2);               
       	     		    theContext.lineTo(theCanvas.width/2, -sticklength/2*100 + theCanvas.height/2); 
	       	     	    theContext.strokeStyle = "#ff00ff";     // magenta
       		     	    theContext.lineWidth = 6;
       	     		    theContext.stroke();
			    theContext.closePath();

		            theContext.beginPath();
        	            theContext.lineWidth = 1;
	        	    theContext.strokeStyle = "#ffffff";     // magenta
        	    	    theContext.fillStyle = "#ffffff";
	            	    theContext.arc(theCanvas.width/2, -Number(FixedPointSlider.value)*sticklength/2*100 + theCanvas.height/2, 2, 0, 2*Math.PI, false);
		            theContext.fill();
        		    theContext.stroke();
			    theContext.closePath();

			}
		    else{
			    theContext.beginPath();
       			    theContext.moveTo(theCanvas.width/9*2, sticklength/2*100 + theCanvas.height/2);               
       	     		    theContext.lineTo(theCanvas.width/9*2, -sticklength/2*100 + theCanvas.height/2); 
       	    	 	    theContext.strokeStyle = "#ff00ff";     // magenta
       	     		    theContext.lineWidth = 6;
       	     	    	    theContext.stroke();
		   	    theContext.closePath();
	      		  }

		}
	}

	    actualx += actualvx*dt;

	if (!collision){
	    if(Fixstick){
		if((theCanvas.width/2 - actualx) < -3){
	    	collision = true;
	    	fixedtime=timing.innerHTML;
	        }
		}
	     else {
		if((theCanvas.width/9*2 - actualx) < -3){
	    	collision = true;
	    	fixedtime=timing.innerHTML;
		}
	    }
	  
	}


<!--  No collision... so show location of small ball -->

	if(!collision){

	    theContext.strokeStyle = "yellow";    
	    theContext.beginPath();
            theContext.arc(actualx, actualy, 2, 0, 2*Math.PI, false);
	    theContext.lineWidth = 2;
	    theContext.fillStyle = "yellow";    
            theContext.fill();
            theContext.stroke();
	    theContext.closePath();

	    BallX.innerHTML=Number(actualx/100).toFixed(3);

	if(Fixstick){
	    COMX.innerHTML=(Number(ballmass*Number(actualx/100)+stickmass*Number(theCanvas.width/100/2))/(ballmass+stickmass)).toFixed(3);
	    }
	else{
	    COMX.innerHTML=(Number(ballmass*Number(actualx/100)+stickmass*Number(theCanvas.width/100/9*2))/(ballmass+stickmass)).toFixed(3);
	    }

	    if(tracepath){
	    theContextual.strokeStyle = "cyan";     
	    theContextual.beginPath();
            theContextual.arc(Number(COMX.innerHTML)*100, theCanvas.height/2 - 100*Number(COMY.innerHTML), 2, 0, 2*Math.PI, false);
            theContextual.fillStyle = "cyan";
	    theContextual.lineWidth = 2;
            theContextual.fill();
            theContextual.stroke();
	    theContextual.closePath();
	    
	    theContextual.strokeStyle = "yellow";    
	    theContextual.beginPath();
            theContextual.arc(actualx, actualy, 2, 0, 2*Math.PI, false);
            theContextual.fillStyle = "yellow";
            theContextual.fill();
            theContextual.stroke();
	    theContextual.closePath();

	    theContextual.strokeStyle = "red";    
	    theContextual.beginPath();
            theContextual.arc(Number(StickX.innerHTML)*100, theCanvas.height/2 - 100*Number(StickY.innerHTML), 2, 0, 2*Math.PI, false);
            theContextual.fillStyle = "red";
            theContextual.fill();
            theContextual.stroke();
	    theContextual.closePath();

	    }


	    if (running) window.setTimeout(UpdatePicture, 20);
	    
	}
	else{
	  

<!--  Logic for the collision -->

	
	if(!Fixstick){   


<!--  Free stick  -->

		theContext.clearRect(0, 0, theCanvas.width, theCanvas.height); 
		var ylocofaxisf=  theCanvas.height/2 - Number(COMY.innerHTML)*100;
		var ytopendofrodf= -sticklength/2*100 + theCanvas.height/2;
		var ybotendofrodf=  sticklength/2*100 + theCanvas.height/2;
		var ylocofobjf=     theCanvas.height/2 - Number(ImpactSlider.value)*sticklength/2*100;
		var xcirf,ycirf;

		moi = Number(MomentofI.innerHTML);
		omega = Number(Angularmom.innerHTML)/moi;

<!-- calculate the location of the ends of the stick -->
		
		COMX.innerHTML = Number(Number(COMX.innerHTML)+Number(COMVx.innerHTML)*dt).toFixed(3);
		
		ytop = ylocofaxisf - Math.cos((timing.innerHTML-fixedtime)*omega)*(ylocofaxisf-ytopendofrodf);
		ybot = ylocofaxisf - Math.cos((timing.innerHTML-fixedtime)*omega)*(ylocofaxisf-ybotendofrodf);
		xtop = Number(COMX.innerHTML)*100 - Math.sin((timing.innerHTML-fixedtime)*omega)*(ylocofaxisf-ytopendofrodf);
		xbot = Number(COMX.innerHTML)*100 - Math.sin((timing.innerHTML-fixedtime)*omega)*(ylocofaxisf-ybotendofrodf);
				
<!--  Draw the stick -->

		theContext.beginPath();
            	theContext.moveTo(xtop, ytop);               
            	theContext.lineTo(xbot, ybot); 
            	theContext.strokeStyle = "#ff00ff";     // magenta
            	theContext.lineWidth = 6;
            	theContext.stroke();
	    	theContext.closePath();

<!-- Locate the ball  -->
		

		cmy = (ballmass*Number(ImpactSlider.value)*sticklength/2)/(stickmass+ballmass);

		xcirf = Number(COMX.innerHTML)*100 - Math.sin((timing.innerHTML-fixedtime)*omega)*(ylocofaxisf-Math.abs((Number(ImpactSlider.value)*100*sticklength/2-(theCanvas.height/2))));
		ycirf = ylocofaxisf - Math.cos((timing.innerHTML-fixedtime)*omega)*(ylocofaxisf-Math.abs((Number(ImpactSlider.value)*100*sticklength/2-(theCanvas.height/2))));

		BallX.innerHTML=Number(xcirf/100).toFixed(3);
		BallY.innerHTML=Number((ycirf)/100).toFixed(3);


		BallVx.innerHTML=Number(Number(COMVx.innerHTML)-Math.cos((timing.innerHTML-fixedtime)*omega)*(ylocofaxisf-Math.abs((Number(ImpactSlider.value)*100*sticklength/2-(theCanvas.height/2))))/100*omega).toFixed(3);

		BallVy.innerHTML=Number(Number(COMVy.innerHTML)+Math.sin((timing.innerHTML-fixedtime)*omega)*Math.abs(ylocofaxisf-Math.abs((Number(ImpactSlider.value)*100*sticklength/2-(theCanvas.height/2))))/100*Math.abs(omega)).toFixed(3);

		StickVx.innerHTML=((Number(COMVx.innerHTML)*(stickmass+ballmass)-ballmass*Number(BallVx.innerHTML))/stickmass).toFixed(3);
		StickVy.innerHTML=((Number(COMVy.innerHTML)*(stickmass+ballmass)-ballmass*Number(BallVy.innerHTML))/stickmass).toFixed(3);
	
		//  StickX.innerHTML=(Number(COMX.innerHTML)-Math.sin((timing.innerHTML-fixedtime)*omega)*cmy).toFixed(3);
		StickX.innerHTML=(((stickmass+ballmass)*Number(COMX.innerHTML)-ballmass*Number(BallX.innerHTML))/stickmass).toFixed(3);
		StickY.innerHTML=(cmy-Math.cos((timing.innerHTML-fixedtime)*omega)*(Number(COMY.innerHTML))).toFixed(3);
		Stickspeed.innerHTML=Number(Math.sqrt(StickVx.innerHTML*StickVx.innerHTML+StickVy.innerHTML*StickVy.innerHTML)).toFixed(3);
		Ballspeed.innerHTML=Number(Math.sqrt(BallVx.innerHTML*BallVx.innerHTML+BallVy.innerHTML*BallVy.innerHTML)).toFixed(3);

           	 theContext.strokeStyle = "yellow";     // magenta
	     	 theContext.beginPath();
             	 theContext.arc(xcirf, ycirf, 2, 0, 2*Math.PI, false);
      	         theContext.fillStyle = "yellow";
	    	 theContext.lineWidth=2;
            	 theContext.fill();
            	 theContext.stroke();
	    	 theContext.closePath();


	    if(tracepath){
	    theContextual.strokeStyle = "cyan";     // magenta
	    theContextual.beginPath();
            theContextual.arc(Number(COMX.innerHTML)*100, theCanvas.height/2 - 100*Number(COMY.innerHTML), 2, 0, 2*Math.PI, false);
            theContextual.fillStyle = "cyan";
            theContextual.fill();
            theContextual.stroke();
	    theContextual.closePath();

	    theContextual.strokeStyle = "red";     // magenta
	    theContextual.beginPath();
            theContextual.arc(Number(StickX.innerHTML)*100, theCanvas.height/2 - 100*Number(StickY.innerHTML), 2, 0, 2*Math.PI, false);
            theContextual.fillStyle = "red";
            theContextual.fill();
            theContextual.stroke();
	    theContextual.closePath();

		 theContextual.strokeStyle = "yellow";     // magenta
	     	 theContextual.beginPath();
             	 theContextual.arc(xcirf, ycirf, 2, 0, 2*Math.PI, false);
      	         theContextual.fillStyle = "yellow";
	    	 theContextual.lineWidth=2;
            	 theContextual.fill();
            	 theContextual.stroke();
	    	 theContextual.closePath();

		}
	    else{
		 theContext.strokeStyle = "yellow";     // magenta
	     	 theContext.beginPath();
             	 theContext.arc(xcirf, ycirf, 2, 0, 2*Math.PI, false);
      	         theContext.fillStyle = "yellow";
	    	 theContext.lineWidth=2;
            	 theContext.fill();
            	 theContext.stroke();
	    	 theContext.closePath();
		}



				omegaafter.innerHTML=Number(omega).toFixed(3);
 				if (running) window.setTimeout(UpdatePicture, 20);
	





			}  
	
			else{  <!-- Fixed Collisions -->
	   			<!-- reset picture -->
	    		        theContext.clearRect(0, 0, theCanvas.width, theCanvas.height);
				var ylocofaxis=  -Number(FixedPointSlider.value)*sticklength/2*100 + theCanvas.height/2;
				var ytopendofrod= -sticklength/2*100 + theCanvas.height/2;
				var ybotendofrod=  sticklength/2*100 + theCanvas.height/2;
				var ylocofobj=     theCanvas.height/2 - Number(ImpactSlider.value)*sticklength/2*100;
				var xcir,ycir, xcir2, ycir2,dumm;
				
				moi= Number(MomentofI.innerHTML);
		//		moi = stickmass*sticklength*sticklength*((1/12)+Number(FixedPointSlider.value)*Number(FixedPointSlider.value)/2) + ballmass*(Number(FixedPointSlider.value)-Number(ImpactSlider.value))*(Number(FixedPointSlider.value)-Number(ImpactSlider.value)*sticklength*sticklength)/2;
				omega = Number(Angularmom.innerHTML)/moi;
				omegaafter.innerHTML=Number(omega).toFixed(3)
				
				
				ytop = ylocofaxis - Math.cos((timing.innerHTML-fixedtime)*omega)*(ylocofaxis-ytopendofrod);
				ybot = ylocofaxis - Math.cos((timing.innerHTML-fixedtime)*omega)*(ylocofaxis-ybotendofrod);
				xtop = theCanvas.width/2 - Math.sin((timing.innerHTML-fixedtime)*omega)*(ylocofaxis-ytopendofrod);
				xbot = theCanvas.width/2 - Math.sin((timing.innerHTML-fixedtime)*omega)*(ylocofaxis-ybotendofrod);


				theContext.beginPath();
            			theContext.moveTo(xtop, ytop);               
            			theContext.lineTo(xbot, ybot); 
            			theContext.strokeStyle = "#ff00ff";     // magenta
            			theContext.lineWidth = 6;
            			theContext.stroke();
	    			theContext.closePath();

			    	theContext.beginPath();
 		                theContext.lineWidth = 1;
        		        theContext.strokeStyle = "#ffffff";     // magenta
            			theContext.fillStyle = "#ffffff";
            			theContext.arc(theCanvas.width/2, -Number(FixedPointSlider.value)*sticklength/2*100 + theCanvas.height/2, 2, 0, 2*Math.PI, false);
            			theContext.fill();
            			theContext.stroke();
				theContext.closePath();


				xcir = theCanvas.width/2 - Math.sin((timing.innerHTML-fixedtime)*omega)*(ylocofaxis-actualy);
				ycir = ylocofaxis - Math.cos((timing.innerHTML-fixedtime)*omega)*(ylocofaxis-actualy);
				BallX.innerHTML=Number(xcir/100).toFixed(3);
				BallY.innerHTML=Number(-ycir/100+3.0).toFixed(3);
				
				StickX.innerHTML=Number((theCanvas.width/2 - Math.sin((timing.innerHTML-fixedtime)*omega)*(ylocofaxis-theCanvas.height/2))/100).toFixed(3);
				StickY.innerHTML=Number(-(ylocofaxis - Math.cos((timing.innerHTML-fixedtime)*omega)*(ylocofaxis-theCanvas.height/2))/100+3.0).toFixed(3);


				Ballspeed.innerHTML=Number(Math.abs(omega*(ylocofaxis-actualy)/100)).toFixed(3);

				BallVx.innerHTML=Number(-Math.cos((timing.innerHTML-fixedtime)*omega)*(ylocofaxis-actualy)/100*omega).toFixed(3);
				BallVy.innerHTML=Number(Math.sin((timing.innerHTML-fixedtime)*omega)*Math.abs(ylocofaxis-actualy)/100*Math.abs(omega)).toFixed(3);

				StickVx.innerHTML=Number(-Math.cos((timing.innerHTML-fixedtime)*omega)*(ylocofaxis-theCanvas.height/2)/100*omega).toFixed(3);
				StickVy.innerHTML=Number(-Math.sin((timing.innerHTML-fixedtime)*omega)*(ylocofaxis-theCanvas.height/2)/100*(omega)).toFixed(3);
				Stickspeed.innerHTML=Number(Math.abs(omega*(ylocofaxis-theCanvas.height/2)/100)).toFixed(3);
	
				COMX.innerHTML=Number((ballmass*Number(BallX.innerHTML)+stickmass*Number(StickX.innerHTML))/(stickmass+ballmass)).toFixed(3);
				COMY.innerHTML=Number((ballmass*Number(BallY.innerHTML)+stickmass*Number(StickY.innerHTML))/(stickmass+ballmass)).toFixed(3);
				COMVx.innerHTML=Number((ballmass*Number(BallVx.innerHTML)+stickmass*Number(StickVx.innerHTML))/(stickmass+ballmass)).toFixed(3);
				COMVy.innerHTML=Number((ballmass*Number(BallVy.innerHTML)+stickmass*Number(StickVy.innerHTML))/(stickmass+ballmass)).toFixed(3);
				
				dumm=Math.sqrt(Number(COMVy.innerHTML)*Number(COMVy.innerHTML)+Number(COMVx.innerHTML)*Number(COMVx.innerHTML));
				COMspeed.innerHTML=Number(dumm).toFixed(3);

				Linearmomx.innerHTML = Number(stickmass*Number(StickVx.innerHTML)+ballmass*Number(BallVx.innerHTML)).toFixed(3);
				Linearmomy.innerHTML = Number(stickmass*Number(StickVy.innerHTML)+ballmass*Number(BallVy.innerHTML)).toFixed(3);
				Linearmom.innerHTML= Number(Math.sqrt(Linearmomx.innerHTML*Linearmomx.innerHTML+Linearmomy.innerHTML*Linearmomy.innerHTML)).toFixed(3);


           			 theContext.strokeStyle = "yellow";     // magenta
	     			 theContext.beginPath();
             			 theContext.arc(xcir, ycir, 2, 0, 2*Math.PI, false);
      			         theContext.fillStyle = "yellow";
	    			 theContext.lineWidth=2;
            			 theContext.fill();
            			 theContext.stroke();
	    			 theContext.closePath();

				xcir2 = 4.5*100 - Math.sin((timing.innerHTML-fixedtime)*omega)*(ylocofaxis-(theCanvas.height/2 - 100*cmy));
				ycir2 = ylocofaxis - Math.cos((timing.innerHTML-fixedtime)*omega)*(ylocofaxis-(theCanvas.height/2 - 100*cmy));





	    if(tracepath){
	    theContextual.strokeStyle = "cyan";     // magenta
	    theContextual.beginPath();
            theContextual.arc(Number(COMX.innerHTML)*100, theCanvas.height/2 - 100*Number(COMY.innerHTML), 2, 0, 2*Math.PI, false);
            theContextual.fillStyle = "cyan";
            theContextual.fill();
            theContextual.stroke();
	    theContextual.closePath();

	    theContextual.strokeStyle = "yellow";     // magenta
	    theContextual.beginPath();
            theContextual.arc(xcir, ycir, 2, 0, 2*Math.PI, false);
            theContextual.fillStyle = "yellow";
            theContextual.fill();
            theContextual.stroke();
	    theContextual.closePath();

	    theContextual.strokeStyle = "red";    
	    theContextual.beginPath();
            theContextual.arc(Number(StickX.innerHTML)*100, theCanvas.height/2 - 100*Number(StickY.innerHTML), 2, 0, 2*Math.PI, false);
            theContextual.fillStyle = "red";
            theContextual.fill();
            theContextual.stroke();
	    theContextual.closePath();

		}
	
 				if (running) window.setTimeout(UpdatePicture, 20);
			
			}


	}


	
	}

	}



	function FixStick(){
	Fixstick = !Fixstick;
	if(!running){
	if(Fixstick == false){
	   Fixedinplace.value="Free Stick";
	   FIXY.innerHTML="NA";
	   UpdatePicture();
	}
	   else {
		Fixedinplace.value="Fixed Stick";
	        FIXY.innerHTML=Number((Number(FixedPointSlider.value)*Number(StickLengthSlider.value)*100/2)/100).toFixed(3);
		UpdatePicture();
	}
	

	}
	}	




	function TracePath(){
	    tracepath=!tracepath;

	    var metersPerPixel = 10 /(0.177 *theCanvas.height);

 	    if(tracepath==true){
		TracePathButton.value="Turn off Trace";
		}
	    else {TracePathButton.value="Trace c.o.m.";}
	}


	
	

    </script>

</body>

</htm