JSFiddle - React, Tailwind, and code Playground

by r043v

HTML

<div id="a2p"></div><div id="p2a"></div>

CSS

div { float:left; width:300px; }

JavaScript

var deg2rad = Math.PI/180;
	var rad2deg = 180/Math.PI;

    /* convert angle to rectangle perimeter coordinates */
	function angle2rect(angle,sx,sy){
	    while(angle < 0) angle += 360; angle %= 360;
	    
	    var a = sy, b = a+sx, c = b+sy, // 3 first corners
		p = (sx+sy)*2, // perimeter
		rp = p/360;// * 0.00277, // ratio between perimeter & 360
		pp = ( ( (angle*rp)+(sy >> 1) )%p ); // angle position on perimeter
	    
	    if(pp <= a) return { x:0,  y:sy - pp };
	    if(pp <= b) return { y:0,  x:pp - a  };
	    if(pp <= c) return { x:sx, y:pp - b  };
			return { y:sy, x:sx - ( pp - c ) };
	}

	/* convert angle to circle perimeter coordinates */
	function angle2circle(angle,radius){
	    var a = (angle + 180) * deg2rad;
	    return {	x: ( (Math.cos(a)+1)*radius),
					y: ( (Math.sin(a)+1)*radius)
	    };
	}

	/* convert perimeter coordinate to angle */
	function xy2angle(x,y,sx,sy){
	    x -= sx/2, y -= sy/2;
	    var a = Math.atan( Math.abs(x) / Math.abs(y) )*rad2deg;
	    if(x >= 0 && y <= 0) return a+90;
	    if(x >= 0 && y >= 0) return 270-a;
	    if(x <= 0 && y >= 0) return a+270;
	    return 90-a;
	}

    var $p2a = $("#p2a"), $a2p = $("#a2p");

    var angle = 33, rectx = 111, recty = 222;

    setInterval(function(){
        var pos = angle2rect(angle,rectx,recty);
        $a2p.append("<br/>"+angle+"° => ["+pos.x+" ; "+pos.y+"]");
        angle = Math.round( xy2angle(pos.x,pos.y,rectx,recty) * 100)/100;
        $p2a.append("<br/>["+pos.x+" ; "+pos.y+"] => "+angle+"°");
    },800);