Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <style>
    input[type=text]{ width:150px } 
  </style>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script>
      /* 
      * jQuery repeatedclick v1.0.5 
      * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
      * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
      * Written by: Alexandr Zykov <alexandrz@gmail.com>
      */
      if (typeof(jQuery) != "undefined")
      jQuery.fn.hold = function(h,j){var c=jQuery.extend({duration:350,speed:0.85,min:50},j);"undefined"===typeof jQuery.repeatedEvents&&(jQuery.repeatedEvents=[]);jQuery.repeatedEvents.push(h);var k=jQuery.repeatedEvents.length-1,d,e;return this.each(function(){d=function(f,b,a){var g=this;jQuery.repeatedEvents[f].call(g,a);e=setTimeout(function(){d.call(g,f,b>c.min?b*c.speed:b,a)},b)};jQuery(this).mousedown(function(a){d.call(this,k,c.duration,a)});var a=function(){"undefined"!==typeof e&&clearInterval(e)};jQuery(this).mouseout(a);jQuery(this).mouseup(a)})};
    </script>  
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <fieldset>
  <legend>Get angle of Point</legend>
    x: <input type="text" id="x" value="">
<button id="xminus">x -</button>
<button id="xplus">x +</button>
    <br>
    y: <input type="text" id="y" value="">
<button id="yminus">y -</button>
<button id="yplus">y +</button>
<br>
<input type="radio" name="function" value="dia" checked onChange="$('#x').change()"> DiamondAngle(y, x)
<br>
<input type="radio" name="function" value="rad" onChange="$('#x').change()"> Math.atan2(y, x)
  </fieldset>
​
  <fieldset>
  <legend>Radians, Diamonds, Degrees</legend>
  Rad: <input type="text" id="rad" value="0">  
  <span id="radNorm">0</span>
  <span id="radNorm2">0</span>
​
<br>
​
  Dia: <input type="text" id="dia" value="0">
<span id="diaNorm">0</span>
​
  <br>
​
  Deg: <input type="text" id="deg" value="0">
<span id="degNorm">0</span>
<span id="degNorm2">0</span>
​
  <br>
​
  <button id="minus" >Degree -</button>
  <button id="plus">Degree +</button>
  </fieldset>
<div id="cont">
<svg id="svg" width="200" height="200">
</svg>
</div>
You can safely use diamond angels for angle comparisons for performance reasons, because bigger euqlidean angles are bigger also in taxicab space, but... 
<p>
... the idea to calculate radians or degrees by using ratio <b>MaxDiamondAngle/DiamondAngle</b> (MaxDiamondAngle is 4.0) to convert from taxicab space to euqlidean space (radians or degrees) is not possible in every case. From diamond angles 0, 0.5, 1.0, 1.5, 2.0, 2.5, 3.0, 3.5, 4.0 the ratio based conversion is reliable and generates the degrees 0, 45, 90, 135, 180, 225, 270, 315, 360. All other diamond angles generate a bit different euqlidean angles because of the different unit "circle" (=square) in taxicab space.
<p>
The values in the last column in Radians, Diamonds, Degrees fieldset are calculated using ratio <b>MaxDiamondAngle/DiamondAngle</b> to derive radians and degrees.
  </body>
</html>
​
 
#svg{
background-color:rgba(220,240,220,1);
margin-top:10px;
}
text{
fill:#777777;
font-size:12px;
opacity:0.5;
}
fieldset,legend,div,input,button
{
font-family:monospace;
white-space:nowrap;
font-size:12px;
}
input[type=text]{
width:134px;
}
span{
display:inline-block;
padding-left:2px;
width:134px;
background-color:white;
}
 
$(document).ready(function(){
$('#svg').html('<g transform="translate(100,100) scale(1,-1)"><path stroke="grey" stroke-width="2" d="M-100,0L100,0"/><path stroke="grey" stroke-width="2" d="M0,-100L0,100"/><path stroke-width="2" stroke="red" d="M0,0L65,0"/><path id="path" stroke-width="2" stroke="red" d="M0,0L30,30"/><circle id="circle" stroke-width="2" stroke="green" fill="white" fill-opacity="0.5" cx="30" cy="30" r="5"/></g><text x="102" y="116">(0,0)</text><text x="102" y="16">(0,100)</text><text x="102" y="190">(0,-100)</text><text x="4" y="116">(-100,0)</text><text x="150" y="116">(100,0)</text>');
$('#cont').html($('#cont').html());
});
​
// Main function
function DiamondAngle(y, x)
{
  y=parseFloat(y);
  x=parseFloat(x);
​
    if (y >= 0)
        return (x >= 0 ? y/(x+y) : 1-x/(-x+y)); 
    else
        return (x < 0 ? 2-y/(-x-y) : 3+x/(x-y)); 
}
// rad -> diamond
function RadiansToDiamondAngle(rad)
{
  rad=parseFloat(rad);
  var P = {"x": Math.cos(rad), "y": Math.sin(rad) };
  return DiamondAngle(P.y, P.x);
}
// diamond -> rad
function DiamondAngleToRadians(dia)
{
  dia=parseFloat(dia);
  var P = DiamondAngleToPoint(dia);
  //console.log(P);
  return Math.atan2(P.y,P.x);
  function DiamondAngleToPoint(dia)
  {
    return {"x": (dia < 2 ? 1-dia : dia-3), 
    "y": (dia < 3 ? ((dia > 1) ? 2-dia : dia) : dia-4)};
  }
}
function DegreesToRadians(degrees)
{
  degrees=parseFloat(degrees);
  return degrees * (Math.PI/180);
}
function RadiansToDegrees(radians)
{
  radians=parseFloat(radians);
  return radians * (180/Math.PI);
}
​
$('document').ready(function()
{
  $('#y,#x').on("change", function()
  {
    if ($('input[name=function]').val()=='dia')
    {
      $('#dia').val(DiamondAngle($('#y').val(), $('#x').val())).change();
    }
    else
    {
      $('#rad').val(Math.atan2($('#y').val(), $('#x').val())).change();
    }
    
    $("#path").attr("d", "M0,0L" + $("#x").val() + "," + $("#y").val());
    $("#circle").attr("cx", $("#x").val()).attr("cy",$("#y").val());
  });
$('#minus').hold(function()
{
  $('#deg').val(parseFloat($('#deg').val())-1).change();
});
$('#plus').hold(function()
{
  $('#deg').val(parseFloat($('#deg').val())+1).change();
});
​
$('#xminus').hold(function()
{
  $('#x').val((parseFloat($('#x').val())-1).toFixed(1)).change();
});
$('#xplus').hold(function()
{
  $('#x').val((parseFloat($('#x').val())+1).toFixed(1)).change();
});
$('#yminus').hold(function()
{
  $('#y').val((parseFloat($('#y').val())-1).toFixed(1)).change();
});
$('#yplus').hold(function()
{
  $('#y').val((parseFloat($('#y').val())+1).toFixed(1)).change();
});
$('#rad').on("change", function()
{
  $('#dia').val(RadiansToDiamondAngle(this.value));
  $('#deg').val(RadiansToDegrees($('#dia').val()));
​
if(parseFloat($('#rad').val()) < 0) $('#radNorm').html(2*Math.PI+parseFloat($('#rad').val()));
else $('#radNorm').html(parseFloat($('#rad').val()));
​
if(parseFloat($('#rad').val()) < 0) $('#degNorm').html(360+parseFloat($('#deg').val()));
else $('#degNorm').html(parseFloat($('#deg').val()));
​
$('#diaNorm').html($('#dia').val());
​
$('#radNorm2').html(2*Math.PI/(4/parseFloat($('#dia').val())));
$('#degNorm2').html(360/(4/parseFloat($('#dia').val())));
​
});
$('#dia').on("change", function()
{
  $('#rad').val(DiamondAngleToRadians(this.value));
  $('#deg').val(RadiansToDegrees($('#rad').val()));
​
if(parseFloat($('#rad').val()) < 0) $('#radNorm').html(2*Math.PI+parseFloat($('#rad').val()));
else $('#radNorm').html(parseFloat($('#rad').val()));
​
if(parseFloat($('#rad').val()) < 0) $('#degNorm').html(360+parseFloat($('#deg').val()));
else $('#degNorm').html(parseFloat($('#deg').val()));
​
$('#diaNorm').html($('#dia').val());
​
$('#radNorm2').html(2*Math.PI/(4/parseFloat($('#dia').val())));
$('#degNorm2').html(360/(4/parseFloat($('#dia').val())));
​
});
​
$('#deg').on("change", function()
{
  $('#rad').val(DegreesToRadians(this.value));
  $('#dia').val(RadiansToDiamondAngle($('#rad').val()));
​
if(parseFloat($('#rad').val()) < 0) $('#radNorm').html(2*Math.PI+parseFloat($('#rad').val()));
else $('#radNorm').html(parseFloat($('#rad').val()));
​
if(parseFloat($('#rad').val()) < 0) $('#degNorm').html(360+parseFloat($('#deg').val()));
else $('#degNorm').html(parseFloat($('#deg').val()));
​
$('#diaNorm').html($('#dia').val());
​
$('#radNorm2').html(2*Math.PI/(4/parseFloat($('#dia').val())));
$('#degNorm2').html(360/(4/parseFloat($('#dia').val())));
​
});
​
//var rad = 2*Math.PI;
//console.log(RadiansToDiamondAngle(rad));
//$('#deg').val("45").change();
$('#x').val("50.0");
$('#y').val("50.0").change();
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers