OK. I suck at math!!
I have a situation where I would like to know the (x,y) position on a bounding square based on an angle.
The angle of 0 and 360 should be straight up.
Assuming we have a bounding square of (0,0 , 99,99) then an angle of 0 deg would return a point of (49,0)
An angle of 45 deg would return a point of (99,49)
180 deg would give (49, 99), 270 would give (0,49) and 360 would be back to (49,0)
I have NO clue how to calculate this. Any suggestions of where to read up on it so I can learn would be greatly appreciated.
Even better would be pseudo-code or even something in JavaScript.
Thanks,
Mike
Recently I just provide an ans for this question in C#, see also.
Well, translate it into JS is not a difficult task.
var c=document.getElementById("myCanvas");
var rect = c.getBoundingClientRect();
var center = [rect.x + rect.width / 2.0, rect.y + rect.height/2.0]
function calCoor(theta, a, b)
{
var rad = theta * Math.PI / 180.0;
var x, y;
var tan = Math.tan(rad);
if (Math.abs(tan) > b/ a)
{
x = tan > 0 ? a : -a;
y = b / tan;
} else
{
x = a * tan;
y = tan < 0 ? b : -b;
}
return [x,y]
}
var angle = 90;
var random_post = calCoor(angle, rect.width / 2.0, rect.height/2.0)
console.log("Angle at: " + angle)
console.log("x at: " + (random_post[0] + center[0]))
console.log("y at: " + (random_post[1] + center[1]))
.square{
width:100px;
height:100px;
border-style: solid;
}
<div class="square" id="myCanvas"></div>
Related
I am attempting to create a 2d tile based game in Javascript, and I need to be able to calculate the angle between two points. I am using the atan2 function to find the angle between two points like so:
function getAngleDegrees(fromX, fromY, toX, toY, force360 = true) {
let deltaX = toX - fromX;
let deltaY = toY - fromY;
let radians = Math.atan2(deltaY, deltaX);
let degrees = (radians * 180) / Math.PI;
if (force360) {
while (degrees >= 360) degrees -= 360;
while (degrees < 0) degrees += 360;
}
return degrees;
}
However, this isn't providing me with the correct result. I have checked the code for logic or math errors and can't find any. No matter what points I input to this function the result will be off by many degrees.
I have created a JS fiddle to visualize the problem:
https://jsfiddle.net/fa6o7wdy/40/
If anyone knows how I can fix my angle function to provide the correct result please help!
Edit:
Here is a picture of the problem:
https://imgur.com/a/OXDCOux
Based on the photo sample you provide, for getting the desired angle you want with current Math.atan() function, you want to reverse first and then rotate the angle by 90 degrees couter clockwise
function getAngleDegrees(fromX,fromY,toX,toY,force360 = true) {
let deltaX = fromX-toX;
let deltaY = fromY-toY; // reverse
let radians = Math.atan2(deltaY, deltaX)
let degrees = (radians * 180) / Math.PI - 90; // rotate
if (force360) {
while (degrees >= 360) degrees -= 360;
while (degrees < 0) degrees += 360;
}
console.log('angle to degree:',{deltaX,deltaY,radians,degrees})
return degrees;
}
or simply + 90 degrees to this line without changing deltaX and deltaY
let degrees = (radians * 180) / Math.PI + 90; // rotate
Note: I haven't test out all possible edge cases
const inBlk = document.createElement('i')
, getXY = (p,xy) => Number(p.split('-')[xy==='x'?0:1])
;
for(let i=0;i<100;i++) // build Grid
{
let nI = inBlk.cloneNode()
, u1 = i%10
;
nI.textContent = u1+'-'+(i-u1)/10
grid.appendChild(nI)
}
let points = [ {x:0, y:0, old:null}, {x:0, y:0, old:null}]
, pN = 0
;
grid.onclick=e=>
{
if (!e.target.matches('i')) return
let elm = e.target.textContent
points[pN].x = getXY(elm, 'x')
points[pN].y = getXY(elm, 'y')
if (points[pN].old ) points[pN].old.classList.remove('color_0', 'color_1')
points[pN].old = e.target
points[pN].old.classList.add(`color_${pN}` )
pN = ++pN %2
if (pN==0) angle.textContent = ` angle: ${getAngleDegrees(points[0],points[1])}°`
}
function getAngleDegrees( from, to, force360 =true)
{
let deltaX = from.x - to.x
, deltaY = from.y - to.y // reverse
, radians = Math.atan2(deltaY, deltaX)
, degrees = (radians * 180) / Math.PI - 90 // rotate
;
if (force360)
{
while (degrees >= 360) degrees -= 360;
while (degrees < 0) degrees += 360;
}
return degrees.toFixed(2)
}
:root { --sz-hw: 26px; }
#grid {
font-family: 'Courier New', Courier, monospace;
font-size : 10px;
margin : calc( var(--sz-hw) /2);
}
#grid i {
display : block;
float : left;
width : var(--sz-hw);
height : var(--sz-hw);
border : 1px solid grey;
text-align : center;
margin : 2px;
line-height: var(--sz-hw);
cursor : pointer;
}
#grid i:nth-child(10n-9) {clear: both; }
.color_0 { background-color: lightcoral; }
.color_1 { background-color: lightgreen; }
#angle { padding: calc( var(--sz-hw) /2) 0 0 calc( var(--sz-hw) *13.4); }
<p id="grid"></p>
<h4 id="angle">angle: ?</h4>
DeltaX toX and fromX needed to be swapped around, same goes for DeltaY. Also, I've subtracted 90 to angle, in order to make 0 degree being North.
The % (mod) operator does same job as your 2 x while loop.
function getAngleDegrees(fromX,fromY,toX,toY,force360 = true) {
let deltaX = fromX - toX;
let deltaY = fromY - toY;
let radians = Math.atan2(deltaY, deltaX)
let degrees = ((radians * 180) / Math.PI) - 90;
if (force360) {
degrees = (degrees + 360) % 360;
}
console.log('angle to degree:',{deltaX,deltaY,radians,degrees})
return degrees;
}
Your code is working correctly, it's just that you have a bit of confusion in your coordinate system.
The angle between 2 points is relative to where you measure from. By subtracting P2 from P1, you're making the angle relative to your starting point. Thus, atan2 is giving you the clockwise angle relative to the X axis.
Traditionally, the X axis is the starting point for rotations, so a horizontal line has an angle of 0:
x = 1;
y = 0;
angle = atan2(y, x) // Equals 0
You've got your grid with Y+ going down, so as Y becomes positive, you'll get clockwise angles from the x-axis.
x = 0;
y = 1;
angle = atan2(y, x) // Equals PI/2, or 90deg
If this is confusing with Y+ going down, you may want to rethink your grid so that Y+ goes up instead.
PS: Good luck on your game!
My Rocket is hitting this Inertia object, as defined in handleCollision. I'm passing in a rocket which has a .r value for its theta and .power for its magnitude.
I'm wanting to update my .rotation & .magnitude according to an inelastic collision as defined by Wikipedia
When colliding from the left, my Inertia moves to the right.
But when colliding from the right it errors and moves exactly 180 degrees off. So if the rocket is up and right at a 45 degree angle from the inertia object, the object will move up and right at a 45 degree angle.
What am I missing here? I thought it might be an issue with the atan function so I converted by the y component & x component of the vector to radians first, same issue.
handleCollision(rocket) {
var angle = rocket.r * Math.PI / 180.0;
var rr = this.rotation * Math.PI / 180;
var rocketVector = {'x' : r.power * Math.cos(angle), 'y' : r.power * Math.sin(angle)};
var inertiaVector = {'x' : this.magnitude * Math.cos(rr), 'y' : this.magnitude * Math.sin(rr)};
var rMass = 10;
var shipMass = 10;
var x = (rMass * rocketVector.x) + (shipMass * inertiaVector.x);
var y = (rMass * rocketVector.y) + (shipMass * inertiaVector.y);
var xDividedByMass = x / (rMass + shipMass);
var yDividedByMass = y / (rMass + shipMass);
var yRadians = (yDividedByMass * Math.PI / 180);
var xRadians = (xDividedByMass * Math.PI / 180);
var theta = Math.atan( yRadians / xRadians);
theta = theta * 180 / Math.PI;
console.log(theta);
var hypotenuse = Math.sqrt((xDividedByMass * xDividedByMass) + (yDividedByMass * yDividedByMass));
this.magnitude = hypotenuse;
this.rotation = theta;
if (this.rotation < 0) {
this.rotation += 360;
} else if (this.rotation > 360) {
this.rotation -= 360;
}
}
If xDividedbyMass>0, you are great because you are quadrant I or IV where arctangent kicks out its values. If you do not like the negative angle, okay add 360 like you did.
But if x<0 and y>0, you will get a negative angle and want to add 180 to get to Q II (tangent has a period of 180). And if x<0, and y<0, you are in QIII and again arctan gives you something in Q1 to which you must add 180.
The logic will look something like this.
if ((x > 0) && (y<0)) {
this.rotation += 360;
} else if (x<0) {
this.rotation += 180;
}
I'm trying to re-size a div element while dragging from top right
or bottom left corners.
In order to calculate the new width and height, i need to know the other
two points on the rectangle
how can I get this values given only two point and the rotation degree?
please view the image I've added to fully understand this issue
plus, the div can be also rotated (centered origin)
to clarify my question:
the aim is to resize a div by dragging the cursor of the mouse from top right corner to bottom left. and then to resize the image so the width will be the distance between mouseX to left side. and the height will be from mouseY to the bottom side. for this i nedd to calculate both top left corner and bottom right corner as the mouse cursor moves along.
thank you.
Knowing two opposite corner points as absolute coordinates, and the angle. The (x1,y1)-(x3,y3) is essentially a rotated line representing the diagonal of the rectangle, so we can do:
Find its midpoint and length of segment (midpoint to a corner)
"Unrotate" the two points around the midpoint
Use abs() with the diffs to get the width and height
The essential code
// find center point (origin) using linear interpolation
var mx = x1 + (x3 - x1) * 0.5,
my = y1 + (y3 - y1) * 0.5,
cos = Math.cos(-angle), sin = Math.sin(-angle);
// unrotate known points (using negative of known angle)
var x1u = cos * (x1-mx) - sin * (y1-my) + mx,
y1u = sin * (x1-mx) + cos * (y1-my) + my,
x3u = cos * (x3-mx) - sin * (y3-my) + mx,
y3u = sin * (x3-mx) + cos * (y3-my) + my;
// Get width and height:
var width = Math.abs(x3u - x1u),
height = Math.abs(y3u - y1u);
To get the points for the missing corners, just rotate the new points made from a mix of the unrotated points:
cos = Math.cos(angle);
sin = Math.sin(angle);
// Use known coordinates for the new points:
var x2u = x1u,
y2u = y3u,
x4u = x3u,
y4u = y1u;
// rotate new points using angle
var x2 = cos * (x2u-mx) - sin * (y2u-my) + mx,
y2 = sin * (x2u-mx) + cos * (y2u-my) + my,
x4 = cos * (x4u-mx) - sin * (y4u-my) + mx,
y4 = sin * (x4u-mx) + cos * (y4u-my) + my;
Demo with plotting
The demo will calculate the "missing" points, width and height, and show the result for each step. Input angle is to verify that it works regardless.
var ctx = document.querySelector("canvas").getContext("2d");
ctx.fillStyle = "#e00";
document.querySelector("input").addEventListener("change", update);
function update() {
// Test rect: 50,25 - 350, 175, center: 200,200, W: 300, H: 150
// generate x1,y1 - x3,y3 known points so we have something to work with:
var value = typeof this.value !== "undefined" ? +this.value : 30,
angle = value * Math.PI / 180,
x1 = Math.cos(angle) * (50-200) - Math.sin(angle) * (275-200) + 200,
y1 = Math.sin(angle) * (50-200) + Math.cos(angle) * (275-200) + 200,
x3 = Math.cos(angle) * (350-200) - Math.sin(angle) * (125-200) + 200,
y3 = Math.sin(angle) * (350-200) + Math.cos(angle) * (125-200) + 200;
// Initial Visuals: rotated rect, known corner points
ctx.clearRect(0,0,400,400);
ctx.strokeStyle = "#000";
ctx.translate(200,200);
ctx.rotate(angle);
ctx.translate(-200,-200);
ctx.strokeRect(50, 125, 300, 150);
ctx.setTransform(1,0,0,1,0,0);
ctx.fillStyle = "#e00";
ctx.fillRect(x1-2, y1-2, 4, 4); ctx.fillText("x1,y1", x1+5, y1);
ctx.fillRect(x3-2, y3-2, 4, 4); ctx.fillText("x3,y3", x3+5, y3);
// Step 1: find center point (origin)
var mx = x1 + (x3 - x1) * 0.5,
my = y1 + (y3 - y1) * 0.5;
ctx.fillRect(mx-2, my-2, 4, 4); // draw center point
// unrotate known points (negative angle)
var x1u = Math.cos(-angle) * (x1-mx) - Math.sin(-angle) * (y1-my) + mx,
y1u = Math.sin(-angle) * (x1-mx) + Math.cos(-angle) * (y1-my) + my,
x3u = Math.cos(-angle) * (x3-mx) - Math.sin(-angle) * (y3-my) + mx,
y3u = Math.sin(-angle) * (x3-mx) + Math.cos(-angle) * (y3-my) + my;
ctx.fillStyle = "#00c";
ctx.fillRect(x1u-2, y1u-2, 4, 4); ctx.fillText("x1u,y1u", x1u+5, y1u-5);
ctx.fillRect(x3u-2, y3u-2, 4, 4); ctx.fillText("x3u,y3u", x3u+5, y3u);
// To get width and height:
var width = Math.abs(x3u - x1u),
height = Math.abs(y3u - y1u);
ctx.fillText("Size: " + ((width+0.5)|0) + " x " + ((height+0.5)|0), 0, 10);
// Mix known coordinates
var x2u = x1u, y2u = y3u,
x4u = x3u, y4u = y1u;
// show unrotated points
ctx.fillStyle = "#0c0";
ctx.fillRect(x2u-2, y2u-2, 4, 4); ctx.fillText("x2u,y2u", x2u+5, y2u-5);
ctx.fillRect(x4u-2, y4u-2, 4, 4); ctx.fillText("x4u,y4u", x4u+5, y4u);
// draw lines between unrotated points to show we have an actual rectangle
ctx.strokeStyle = "#777"; ctx.beginPath();
ctx.moveTo(x1u, y1u); ctx.lineTo(x2u, y2u);
ctx.lineTo(x3u, y3u); ctx.lineTo(x4u, y4u);
ctx.closePath(); ctx.stroke();
// rotate new points using angle
var x2 = Math.cos(angle) * (x2u-mx) - Math.sin(angle) * (y2u-my) + mx,
y2 = Math.sin(angle) * (x2u-mx) + Math.cos(angle) * (y2u-my) + my,
x4 = Math.cos(angle) * (x4u-mx) - Math.sin(angle) * (y4u-my) + mx,
y4 = Math.sin(angle) * (x4u-mx) + Math.cos(angle) * (y4u-my) + my;
// show new coordinates
ctx.fillStyle = "#f0f";
ctx.fillRect(x2-2, y2-2, 4, 4); ctx.fillText("x2,y2", x2+5, y2);
ctx.fillRect(x4-2, y4-2, 4, 4); ctx.fillText("x4,y4", x4+5, y4);
}
update();
<script src="https://cdn.rawgit.com/epistemex/slider-feedback/master/sliderfeedback.min.js"></script>
Angle: <input type=range min=0 max=360 value=30><br><canvas width=400 height=400></canvas>
I think you should use Trigo for that, but since I'm terrible with those, here is a dumb way without any Maths, to get the absolute positioning of your points.
var tl= document.querySelector('#tl').getBoundingClientRect();
var tr= document.querySelector('#tr').getBoundingClientRect();
var br= document.querySelector('#br').getBoundingClientRect();
var bl= document.querySelector('#bl').getBoundingClientRect();
var pointsList = {
tl:[tl.left, tl.top],
tr:[tr.left, tr.top],
br:[br.left, br.top],
bl:[bl.left, bl.top],
};
for(var p in pointsList){
document.querySelector('#r').innerHTML+=p+' '+pointsList[p].join(' , ')+'<br>';
}
#main{background-color:#CCC;height: 120px; width: 70px; position: relative; transform: rotate(30deg)}
.dot{ width: 1px; height: 1px; position: absolute; background-color:#000;}
#tl{top:0; left:0;}
#tr{top:0; right:0;}
#br{bottom:0; right:0;}
#bl{bottom:0; left:0;}
<div id="main">
<div id="tl" class="dot"></div>
<div id="tr" class="dot"></div>
<div id="br" class="dot"></div>
<div id="bl" class="dot"></div>
</div>
<div id="r">
Ken's comments are a good starting point actually. You can take the tangent inverse of the slope of the diagonal and add the degrees rotated to find the angle between the diagonal and a side.
m = (y3-y1)/(x3-x1)
diag_angle = arctan(m)
diag_angle_adjusted = diag_angle + rotation
This will give you the angle between the diagonal and the bottom left side. Then, you can use the distance formula to get the diagonal length.
diag_length = (y3 - y1)^2 + (x3-x1)^2
To find the length of the bottom left side you would use the cos formula, and for the bottom right you would use sin.
bot_left = diag_length*cos(diag_angle_adjusted)
This would let you get the lengths of the sides and proceed to calculate the other x and y. For example,
sin(rotation) = (y2 - y4)/bot_left
After solving for y4, it should be fairly simple to solve for x4 using cos.
I am answering from my phone and have not formally tested this, but that approach should work. Hopefully tomorrow I will have time to diagram the answer if it's not clear.
Good luck! And make sure to keep your signs correct for rotation.
Naming point (x1,x2) p1 etc.,
naming the rotation angle rot (minus 30deg in the example),
naming the distance frop p1 to p4 d14 etc.
Using the fact that the length op the projection of a vector on an axis is the absolute value of the dot-product of that vector on the ubit vector in that direction,
the length of p1-p4 is the dot product of (cos(rot), sin(rot)) with (x3 - x1, y3 - y1).
d14 = abs((x3 - x1)*cos(rot) + (y3 - y1)*sin(rot))
d12 = abs((x3 - x1)*cos(rot + 90) + (y3 - y1)sin(rot +90))
If you need the coordinates of p2 and p4
x4 = x1 + d14 * cos(rot)
y4 = y1 + d14 * sin(rot)
x2 = x1 + d12 * cos(rot + 90)
y2 = y1 + d12 * sin(rot + 90)
( created on my tablet, to be reviewed when I work on my laptop)
I have made a very simple Pie Graph generator using Javascript & SVG graphics. You just enter the angle of the pie graph you want then click the button.
My Problem: It generates graphs that are too big for the angles 100 degrees, 180 degrees & many others. It does generate the correct pie for the angle 277. For an angle such as 180 which should be a half circle it shows a pie of 270 degrees for some reason.
Whats wrong with my simple algorithm that leads to the wrong pie shapes/values?
The JSFiddle is here (for some reason the JSFiddle wont update but if you copy the HTML below it all works): http://jsfiddle.net/mabg3/1/
<html>
<head>
<script type="text/javascript">
<!--
function createPieGraph()
{
var angle = parseInt(document.getElementById("angleVal").value, 10);
var path = document.getElementById("pie"); //document.createElement("path");
var diameter = 200
var rad = diameter/2;
var point = resolveToPoint(angle, diameter);
var d = "M"+diameter+","+diameter+" L"+point.mX+","+point.mY+" A"+rad+","+rad+" "+determineDisplayType(angle)+" "+determineArcEnd(angle, diameter, rad)+" z";
path.setAttribute("d", d);
}
function resolveToPoint( /*int*/ deg, /*int*/ diameter )
{
var rad = Math.PI * deg / 180;
var r = diameter / 2;
var x = r * Math.cos(rad);
var y = r * Math.sin(rad);
var midX = diameter;
var midY = diameter;
if (deg <= 90)
{
console.log("1");
x = midX + x;
y = midY - y;
}
else if (deg <= 180)
{
console.log("2");
x = midX + x;
y = midY + y;
}
else if (deg <= 270)
{
console.log("3");
x = midX - x;
y = midY + y;
}
else if (deg <= 360)
{
console.log("4");
x = midX - x;
y = Math.abs(y);
}
return {mX: x, mY: y};
}
function determineDisplayType( /*int*/ deg )
{
if (deg <= 90)
return "0 0,0";
else if (deg <= 180)
return "0 1,0";
else if (deg <= 270)
return "0 1,0";
else if (deg <= 360)
return "1 1,1";
return "0 0,0";
}
function determineArcEnd( /*int*/ deg, /*int*/ diameter, /*int*/ rad )
{
if (deg >= 270)
return ""+rad+","+diameter;
return ""+diameter+","+rad;
}
-->
</script>
</head>
<body>
<svg id="main" width="400" height="400" style="background-color: red;">
<path id="pie" fill="blue" stroke="white"></path>
</svg>
<input type="text" id="angleVal" value="Enter angle"></input>
<input type="button" onclick="createPieGraph();" value="Show Pie Graph"></input>
</body></html>
http://jsfiddle.net/mabg3/11/
Firstly, the fiddle didn't work because your javascript was being wrapped, but your inline click handler was looking for a global function. I unwrapped it (see the drop box on the left), which isn't a good idea for real code, but solves the problem easily enough in this example.
I also made the code much shorter. Not sure what all those functions were for; the only flag that needs changing is the large-arc if the angle is more than half the circle. The sweep flag is constant because we always render in one orientation.
My code can be easily improved and generalised (you can handle negative and >360 angles differently, you can make the initial angle different, etc.), but it works well enough.
I am working with SVG graphics to draw Pie Graphs. I am given the degrees a pie graph should be - eg 277 degrees - and the diameter - eg 200px - and I need to draw a circle of 277 degrees.
With SVG graphics I need to resolve that 277 degrees to a point where that circle will end.
I am not the greatest with math, so I have come up with a formula/javascript function that will allow me to take a degrees value & come up with a x,y point of where the circle will end.
Will my Javascript function(at the bottom) correctly resolve a degrees to a correct point? Can you help me develop my algorithm to obtain the coordinate from a degree value? Or maybe there is an existing algorithm I can use that I dont know about?
My Algorithm: (Which I require help with)
So the values I am given are: Circle Diameter: 200px, Circle size: 277 degrees.
I require the point at which 277 ends when rotating around the point 0,0.
277 ends in the 1st quadrant which means I need to use sin (is that correct?)
So the values I know now of the triangle are: the hypotenuse=100px(the radius), the angle=7 degrees(277-270).
sin(7) = o/100;
0.1219 = o/100;
o = 12.2;
Therefore the y point is 12.2 (for my sakes 0,0 is the top left corner so its really midY-x = 100-12.2 = 87.8; (is that correct?)
Now to determine the x pos, I use cos(is that correct?).
cos(7) = a/100;
a = 99.25;
Therefore the x point is 99.25 or 100-99.25=0.75;
So the x,y coordinate of 277 degrees is 0.75,87.8. Is that correct?
So in code this algorithm would be:
function resolveToPoint( deg, diameter )
{
if ( deg <= 0)
return 0;
var x = 0;
var y = 0;
var angle = 0;
var rad = diameter/2;
var midX = rad;
var midY = rad;
if (deg <= 90)
angle = 90 - deg;
else if (deg <= 180)
angle = deg - 90;
else if (deg <= 270)
angle = deg - 180;
else if (deg <= 360)
angle = deg - 270;
// Q: Will I ALWAYS use cos to determine the x & sin for the x NO MATTER what quadrant the angle is in??
x = Math.cos(angle) * rad;
y = Math.sin(angle) * rad;
if (deg <= 90)
{
x = midX + x;
y = midY - y;
}
else if (deg <= 180)
{
x = midX + x;
y = midY + y;
}
else if (deg <= 270)
{
x = midX - x;
y = midY + y;
}
else if (deg <= 360)
{
x = midX - x;
y = midY - y;
}
return {mX: x, mY: y};
}
Then I'll use it in a SVG like so:
function outputPiegraph( point, rad, diameter )
{
var svg = '<svg width="%spx" height=""%spx" id='pie' style="background-color: green;">
<path d="M%spx,%spx L%spx, %spx A%spx,"%spx 1 1,1 %spx,%spx z"
fill="red" stroke="blue" stroke-width="2" />"
</svg>';
return sprintf(svg, diameter, diameter, point.mX, point.mY, rad, rad, rad, diameter);
}
This is simple conversion from polar to Cartesian coordinates:
function resolveToPoint(deg, diameter) {
var rad = Math.PI * deg / 180;
var r = diameter / 2;
return {mX: r * Math.cos(rad), mY: r * Math.sin(rad)};
}
http://en.wikipedia.org/wiki/Polar_coordinates#Converting_between_polar_and_Cartesian_coordinates
If you consider the unit circle, then the X-coordinate for a given (radians-based) angle is given by the cosine, likewise, the Y-coordinate is given by the sine. So, you can solve this easily as follows.
function resolveToPoint(deg, diameter) {
var radians = angle_in_degrees / 180 * Math.PI;
var x = diameter / 2 * cos(radians);
var y = diameter / 2 * sin(radians);
return {mX : x, mY: y};
}