memish · August 17, 2018 22:11
diff --git a/AngleCalculator.html b/AngleCalculator.html
 <html lang=en>
 <head>
 <meta charset=utf-8>
    <title>Javascript gravity</title>
    </head>
    <body onload="init()">
 
 
 <script>
    //Canvas setup below
           var canvas, ctx, container;
           canvas = document.createElement( 'canvas' );
            ctx = canvas.getContext("2d");
    //Canvas Setup Above
    
    
     var ball; // ball object
     var message = "Angle of line";//text on screen


    //point start positions - this will reset with new values each
    var pX1 = 100;
    var pY1 = 200;
    
    //Point for Static Circle
    var pX1S = 100;
    var pY1S = 200;
    
    //point that ball will move to 
    //needs to be calculated based on first position and angle
     var pX2 ;
     var pY2 ;
    //Start angle
     var angleStart = 90;
    //calculated angle
     var angle;
    //distance in pixels that ball will move
     var dist = 5;
     
    //initialize key variables. gets called when page loads
    function init(){
        setupCanvas();//sets up the canvas
        setAngle();//calculates angle
    }
    
    
    //things that appear on the screen
    function draw() {
        //clear the screen
        ctx.clearRect(0,0,canvas.width, canvas.height); 
        
           //display some text on screen
 	       ctx.fillStyle = "blue";
           ctx.font = "20px Arial";
           ctx.fillText(message, 20,20); 
        
            //draw static cirlce 
            ctx.beginPath();
            ctx.arc(pX1S, pY1S,100, 0, Math.PI*2, false);
            ctx.stroke();
            ctx.closePath();
 
           
 
            //draw Ball that moves
            ctx.beginPath();
            ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2, false);
            ctx.fillStyle = ball.color;
            ctx.fill();
            ctx.closePath();
        
        //draw line
         ctx.beginPath();
         ctx.moveTo(pX1,pY1);//line follows the circle
         ctx.lineTo(pX1S,pY1S);
         ctx.stroke();
         ctx.closePath();
        
            ballMove();//move the ball and boundries
            myFunction();//calculations
    }
 
    setInterval(draw,  200); 
    
    function ballMove(){ 
       
            ball.x = pX1;
            ball.y = pY1; 
        
        //if canvas is larger than boundry of screen reset
 if(ball.x>canvas.width || ball.x<0 || ball.y>canvas.height || ball.y<0)
            setAngle();
           
 }
 

    
    
 function myFunction() {
    //calculate points based on one point and angle and distance
    //calculate next position of ball x and ball y (will add px2 and py2)
    //sine and cosine of angle * (PI divided by 180)
    var s = Math.sin(angle * (Math.PI/180));
    var c = Math.cos(angle * (Math.PI/180));
    //times these values by distance (5) to get new point
    pX2 = dist * s;
    pY2 = dist * c;
    
    //Two version for calculating angle based on points given
    //Version 1 - not using this, but it works
     var m =(pX1 - pX1S)/(pY1 - pY1S);// (pX1S-pX2)/(pY1S-pY2);
     var ang =  Math.atan(m) * (180 / Math.PI);
    
    // Version 2 angle in degrees
     var angleDeg = Math.atan2(pY1 - pY1S, pX1 - pX1S) * 180 / Math.PI;
    // NOT USING BELOW angle in radians
    //var angleRadians = Math.atan2(pY1 - pY1S, pX1 - pX1S);


    //reposition angle to fit format of canvas
    var aD;
    if(angle>0 && angle<271){
         aD =  Math.round(angleDeg + 90)
      } else{
         aD = Math.round(angleDeg + 450)
      }
    
    //new point for cirlce is set
    pX1 += pX2;
    pY1 += pY2;
    
    //print angle to screen to make sure it's working
     message = "Calculated Angle: " + aD + " Set Angle: " + (180 - angle);
  
 }    
    
    //called at start of program and each time we add or subtract from Angle
    function setAngle(){
        //make sure we reset angle when we go over 360
        if(angleStart>360)
            angleStart=0;
        //reset when we go below 0
        if(angleStart<0)
            angleStart=360;
        
        //reset starting point to center of screen
          pX1 = canvas.width/2;
          pY1 = canvas.height/2;
          pX1S = canvas.width/2;
          pY1S = canvas.height/2;
        
          //variables for second point
          pX2 ;
          pY2 ;
        
        //Information about the ball is saved on line below
        ball = {x:pX1, y:pY1, radius:20, status: 0,   color:"red"};
        
        //for the formula for calculating next points --> 
        //we're using front side and it calculates the back of line angle
        //thus, we subtract from 180
         angle = 180  - angleStart;
    }
    
    //Key Pressed stuff below   
    this.document.onkeydown = keyPressed;

    this.document.onkeyup = keyRelease;

 function keyPressed(event) {
 
  //right key add 5 to angle
    if(event.keyCode==39){
       angleStart += 5;
        setAngle();
       
    }
    //left key subtracts
    if(event.keyCode==37){
        angleStart -= 5;
        setAngle();
    }
    
 }
 function keyRelease(event) {
   
 } 
    
    
    
 //SETUP CANVAS BELOW
    
   function setupCanvas() {//setup canvas
 
 
 	container = document.createElement( 'div' );
 	container.className = "container";
 
 	canvas.width = window.innerWidth; 
 	canvas.height = window.innerHeight; 
 	document.body.appendChild( container );
 	container.appendChild(canvas);	
 
 	ctx.strokeStyle = "#000000";
 	ctx.lineWidth = 8;	
 }  
 
        </script>
    </body>
 </html>
	<html lang=en>
	<head>
	<meta charset=utf-8>
	<title>Javascript gravity</title>
	</head>
	<body onload="init()">


	<script>
	//Canvas setup below
	var canvas, ctx, container;
	canvas = document.createElement( 'canvas' );
	ctx = canvas.getContext("2d");
	//Canvas Setup Above


	var ball; // ball object
	var message = "Angle of line";//text on screen


	//point start positions - this will reset with new values each
	var pX1 = 100;
	var pY1 = 200;

	//Point for Static Circle
	var pX1S = 100;
	var pY1S = 200;

	//point that ball will move to
	//needs to be calculated based on first position and angle
	var pX2 ;
	var pY2 ;
	//Start angle
	var angleStart = 90;
	//calculated angle
	var angle;
	//distance in pixels that ball will move
	var dist = 5;

	//initialize key variables. gets called when page loads
	function init(){
	setupCanvas();//sets up the canvas
	setAngle();//calculates angle
	}


	//things that appear on the screen
	function draw() {
	//clear the screen
	ctx.clearRect(0,0,canvas.width, canvas.height);

	//display some text on screen
	ctx.fillStyle = "blue";
	ctx.font = "20px Arial";
	ctx.fillText(message, 20,20);

	//draw static cirlce
	ctx.beginPath();
	ctx.arc(pX1S, pY1S,100, 0, Math.PI*2, false);
	ctx.stroke();
	ctx.closePath();



	//draw Ball that moves
	ctx.beginPath();
	ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2, false);
	ctx.fillStyle = ball.color;
	ctx.fill();
	ctx.closePath();

	//draw line
	ctx.beginPath();
	ctx.moveTo(pX1,pY1);//line follows the circle
	ctx.lineTo(pX1S,pY1S);
	ctx.stroke();
	ctx.closePath();

	ballMove();//move the ball and boundries
	myFunction();//calculations
	}

	setInterval(draw, 200);

	function ballMove(){

	ball.x = pX1;
	ball.y = pY1;

	//if canvas is larger than boundry of screen reset
	if(ball.x>canvas.width \|\| ball.x<0 \|\| ball.y>canvas.height \|\| ball.y<0)
	setAngle();

	}




	function myFunction() {
	//calculate points based on one point and angle and distance
	//calculate next position of ball x and ball y (will add px2 and py2)
	//sine and cosine of angle * (PI divided by 180)
	var s = Math.sin(angle * (Math.PI/180));
	var c = Math.cos(angle * (Math.PI/180));
	//times these values by distance (5) to get new point
	pX2 = dist * s;
	pY2 = dist * c;

	//Two version for calculating angle based on points given
	//Version 1 - not using this, but it works
	var m =(pX1 - pX1S)/(pY1 - pY1S);// (pX1S-pX2)/(pY1S-pY2);
	var ang = Math.atan(m) * (180 / Math.PI);

	// Version 2 angle in degrees
	var angleDeg = Math.atan2(pY1 - pY1S, pX1 - pX1S) * 180 / Math.PI;
	// NOT USING BELOW angle in radians
	//var angleRadians = Math.atan2(pY1 - pY1S, pX1 - pX1S);


	//reposition angle to fit format of canvas
	var aD;
	if(angle>0 && angle<271){
	aD = Math.round(angleDeg + 90)
	} else{
	aD = Math.round(angleDeg + 450)
	}

	//new point for cirlce is set
	pX1 += pX2;
	pY1 += pY2;

	//print angle to screen to make sure it's working
	message = "Calculated Angle: " + aD + " Set Angle: " + (180 - angle);

	}

	//called at start of program and each time we add or subtract from Angle
	function setAngle(){
	//make sure we reset angle when we go over 360
	if(angleStart>360)
	angleStart=0;
	//reset when we go below 0
	if(angleStart<0)
	angleStart=360;

	//reset starting point to center of screen
	pX1 = canvas.width/2;
	pY1 = canvas.height/2;
	pX1S = canvas.width/2;
	pY1S = canvas.height/2;

	//variables for second point
	pX2 ;
	pY2 ;

	//Information about the ball is saved on line below
	ball = {x:pX1, y:pY1, radius:20, status: 0, color:"red"};

	//for the formula for calculating next points -->
	//we're using front side and it calculates the back of line angle
	//thus, we subtract from 180
	angle = 180 - angleStart;
	}

	//Key Pressed stuff below
	this.document.onkeydown = keyPressed;

	this.document.onkeyup = keyRelease;

	function keyPressed(event) {

	//right key add 5 to angle
	if(event.keyCode==39){
	angleStart += 5;
	setAngle();

	}
	//left key subtracts
	if(event.keyCode==37){
	angleStart -= 5;
	setAngle();
	}

	}
	function keyRelease(event) {

	}



	//SETUP CANVAS BELOW

	function setupCanvas() {//setup canvas


	container = document.createElement( 'div' );
	container.className = "container";

	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	document.body.appendChild( container );
	container.appendChild(canvas);

	ctx.strokeStyle = "#000000";
	ctx.lineWidth = 8;
	}

	</script>
	</body>
	</html>
No results found