mulderu/point-algebra.html

## point-algebra.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>2point algebra</title>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <style>
    #pan { position: relative; width: 1000px; height: 800px; }
    .jum { position: absolute; background-color:blue; width: 5px; height: 5px; }
  </style>
</head>
<body>

  <div id="pan">
  </div>
  <div id="log">
  </div>

  <script>
    var logs = [];
    function addLog(s, b, c) {
      if(typeof b !== 'undefined') s += ' ' + b;
      if(typeof c !== 'undefined') s += ' ' + c;

      logs.unshift(s);
      $('#log').html ('<div>'+logs.join("</div><div>") + '</div>');

    }
    function getLength(p1, p2) {
      let dx = p1.x-p2.x, dy = p1.y-p2.y;

      return Math.sqrt(dx*dx + dy*dy);
    }
    function getAngleR(p1, p2) {
      return Math.atan2(p2.y - p1.y, p2.x - p1.x);
    }
    function rad2deg(r) {
      return r * 180 / Math.PI;
    }
    function addbox(p,c) {
      let $p = $('<div class="jum"></div>');
      $p.css({left:p.x+'px', top:p.y+'px'});
      if(typeof c === 'string') $p.css({'background-color': c});

      $p.appendTo($('#pan'));
    }
    $(document).ready(function() {
      var p1={x:200, y:200}, p2={x:400, y:340};

      addbox(p1);
      addLog('p1')
      addbox(p2);
      addLog('p2')
      var a1 = getAngleR(p1, p2);
      var r1 = getLength(p1, p2);
      var r2 = 90;

      addLog(a1, 'deg', rad2deg(a1))

      var dx = Math.cos(a1) * (r1+r2);
      var dy = Math.sin(a1) * (r1+r2);

      addLog(r1)
      addLog(dx)
      addLog(dy)

      var p3 = {x: p2.x-dx, y: p2.y-dy};
      addbox(p3, 'red')
      var p4 = {x: p1.x+dx, y: p1.y+dy};
      addbox(p4, 'red')


    });
  </script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>2point algebra</title>
	<script src="https://code.jquery.com/jquery.min.js"></script>
	<style>
	#pan { position: relative; width: 1000px; height: 800px; }
	.jum { position: absolute; background-color:blue; width: 5px; height: 5px; }
	</style>
	</head>
	<body>

	<div id="pan">
	</div>
	<div id="log">
	</div>

	<script>
	var logs = [];
	function addLog(s, b, c) {
	if(typeof b !== 'undefined') s += ' ' + b;
	if(typeof c !== 'undefined') s += ' ' + c;

	logs.unshift(s);
	$('#log').html ('<div>'+logs.join("</div><div>") + '</div>');

	}
	function getLength(p1, p2) {
	let dx = p1.x-p2.x, dy = p1.y-p2.y;

	return Math.sqrt(dxdx + dydy);
	}
	function getAngleR(p1, p2) {
	return Math.atan2(p2.y - p1.y, p2.x - p1.x);
	}
	function rad2deg(r) {
	return r * 180 / Math.PI;
	}
	function addbox(p,c) {
	let $p = $('<div class="jum"></div>');
	$p.css({left:p.x+'px', top:p.y+'px'});
	if(typeof c === 'string') $p.css({'background-color': c});

	$p.appendTo($('#pan'));
	}
	$(document).ready(function() {
	var p1={x:200, y:200}, p2={x:400, y:340};

	addbox(p1);
	addLog('p1')
	addbox(p2);
	addLog('p2')
	var a1 = getAngleR(p1, p2);
	var r1 = getLength(p1, p2);
	var r2 = 90;

	addLog(a1, 'deg', rad2deg(a1))

	var dx = Math.cos(a1) * (r1+r2);
	var dy = Math.sin(a1) * (r1+r2);

	addLog(r1)
	addLog(dx)
	addLog(dy)

	var p3 = {x: p2.x-dx, y: p2.y-dy};
	addbox(p3, 'red')
	var p4 = {x: p1.x+dx, y: p1.y+dy};
	addbox(p4, 'red')




	});
	</script>

	</body>
	</html>