Develop Reference

Get new point coordinate by current Point coordinate, angle and distance in arcgis js api 4.x

I want to get coordinate (x,y) of a point B based on coordinate of point A and distance from the point A and an angle using Arcgis js API 4.x .
For example : i have point A in (a,b) the distance between A and B is 500m and the angle is 20°, how can i get (x,y) of B.

i fount the equation here, i implemented it and it works perfectly.
this is my simple :
const R = 6371e3; //rayon of the erth
let lat1 = 36.7538 * Math.PI / 180; // latitude in rad
let long1 = 3.0588 * Math.PI / 180; // longiture in rad
let d = 5000; //distance between the two points
let angle = (90-20)*Math.PI/180; // the angle between the 2 points in rad (20°)
const sigma = d / R;
const delLat = sigma * Math.cos(angle);
let lat2 = (lat1 + delLat) * 180 / Math.PI;//latitude of the destination point
const del = Math.log(Math.tan(lat2 / 2 + Math.PI / 4) / Math.tan(lat1 / 2 + Math.PI / 4));
// const q = Math.abs(del) > 10e-12 ? delLat / del : Math.cos(lat1);
const q = Math.cos(lat1)
const delLong = sigma * Math.sin(angle) / q;
let long2 = (long1 + delLong) * 180 / Math.PI; //longitude of the destination point

Draw ellipse with 5points in canvas

I am not so good in Mathematics. I have a requirement to draw an ellipse using 5 coordinates where user will click on 5 different position in a canvas and getting that clicked coordinate 1 ellipse will drawn. To draw ellipse in canvas I have the method
ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]);
Where I need the center position and 2radius of the ellipse. I only have 5coordinates of the perimeter of the ellipse. I get a matrics formula to calculate the ellipse.
ax2+bxy+cy2+dx+ey+f=0
I am unable to convert that equation to js. I am thankful to you if you please help me out to calculate the mazor and minor radius and center point of ellipse from 5 arbitary points

Having 5 points, you can find general formula of conic section (here ellipse) expanding determinant of this matrix (substitute xi,yi with your point coordinates):
(picture taken here)
Simple example to begin with
Using my answer for inverse problem
//calc implicit ellipse equation
//semiaxes rx, ry; rotated at fi radians; centered at (cx,cy)
//note: implicit form Ax^2+Bxy+Cy^2+Dx+Ey+F=0 (not 2B,2D,2E)
// in Pascal notation Sqr is squared
B := Sin(2 * Fi) * (ry * ry - rx * rx);
A := Sqr(ry * Cos(fi)) + Sqr(rx * Sin(fi));
C := Sqr(rx * Cos(fi)) + Sqr(ry * Sin(fi));
D := -B * cy - 2 * A * cx;
E := -2 * C * cy - B * cx;
F := C * cy * cy + A * cx * cx + B * cx * cy - rx * rx * ry * ry;
we can see that
Fi = 0.5 * atan2(B, A-C)
then
ry^2+rx^2 = A + C
ry^2-rx^2 = B / Sin(2*Fi)
so
ry = Sqrt((A + C + B / Sin(2*Fi))/2)
rx = Sqrt((A + C - B / Sin(2*Fi))/2)
(except for Fi=0 case, where we can extract semiaxes from A and C directly)
and then find cx, cy from D/E equation system
Also look at Wiki formulas for the same problem

How to "push out "XYZ coordinates forming a 3D orbit with an offset in the middle

I have a orbit of length 200. But it is centered around a sun of radius 0 (length 0). Now I want to expand the sun to have a radius of 1 and "push" out the outer orbits as well.
The XYZ coordinates look like this:
[-6.76, 5.75, -1.06],
[-6.95, 5.54, -0.91],
[-7.13, 5.33, -0.75],
[-7.31, 5.11, -0.58]
... followed by 196 more coordinates
I tried tried a lot of things to make the circle bigger * radius and / someNumbers. To at least try to do it myself.
But i lost it when i made an if like this:
If(the x coordination > 0)
the x coordination += 1;
}
Else{
the x coordination += 1;
}
And also for Y and Z but when they came close to the 1 and -1 position of that axis they skipped to the other side.
Creating a line (with the width of 1 on both sides) of emptiness along the axis.
Result of MBo's awnser(view from above):
// arrayIndex is a number to remember at which point it is in the orbit array
satellites.forEach(function (element) {
if (element.arrayIndex>= element.satellite.coordinates.length) {
element.arrayIndex= 0;
}
var posX = element.satellite.coordinates[element.arrayIndex][0];
var posY = element.satellite.coordinates[element.arrayIndex][1];
var posZ = element.satellite.coordinates[element.arrayIndex][2];
R = Math.sqrt(posX^2 + posY^2 + posZ^2);
cf = (R + earthRadius) / R;
xnew = posX * cf;
ynew = posY * cf;
znew = posZ * cf;
// var posX = earthRadius * (element.satellite.coordinates[element.test][0] / (200 * earthRadius) * earthRadius);
// var posY = earthRadius * (element.satellite.coordinates[element.test][1] / (200 * earthRadius) * earthRadius);
// var posZ = earthRadius * (element.satellite.coordinates[element.test][2] / (200 * earthRadius) * earthRadius);
// divide by 100 to scale it down some more
element.position.x = xnew / 100;
element.position.y = ynew / 100;
element.position.z = znew / 100;
element.arrayIndex= element.arrayIndex+ 1;
});

You have orbit radius
/////////R = Sqrt(x^2 + y^2 + z^2)
Edit to avoid confusion:
R = Sqrt(x * x + y * y + z * z)
You need to modify coordinates to make orbit radius R+r. To preserve orbit form, for every point find it's R, and multiply all components by coefficient (R+r)/R
R = Sqrt(x^2 + y^2 + z^2)
cf = (R + r) / R
xnew = x * cf
ynew = y * cf
znew = z * cf

Add Velocity Relative To Object

I am trying to make a train in js but i want add the velocity to the train.
but the train has an other axis relative to the canvas so how can i add the velocity relative to canvas
http://snapsoft.eu/example.png

If train system is rotated relative to stationary system by angle Theta, then you can transform velocity vector Vr (in rotated) to Vs (in stationary):
Vs.X = Vr.X * Cos(Theta) - Vr.Y * Sin(Theta)
Vs.Y = Vr.X * Sin(Theta) + Vr.Y * Cos(Theta)
If rotated system moves with velocity W, then add W also
Vs.X = W.X + Vr.X * Cos(Theta) - Vr.Y * Sin(Theta)
Vs.Y = W.Y + Vr.X * Sin(Theta) + Vr.Y * Cos(Theta)
In your example
Theta = -Pi/4
Vs.X = 0.5 * 0.707 + 0 * 0.707 = 0.3535
Vs.Y = - 0.5 * 0.707 + 0 * 0.707 = -0.3535

Circle coordinates to array in Javascript

What's the best way to add the coordinates of a circle to an array in JavaScript? So far I've only been able to do a half circle, but I need a formula that returns the whole circle to two different arrays: xValues and yValues. (I'm trying to get the coordinates so I can animate an object along a path.)
Here's what I have so far:
circle: function(radius, steps, centerX, centerY){
var xValues = [centerX];
var yValues = [centerY];
for (var i = 1; i < steps; i++) {
xValues[i] = (centerX + radius * Math.cos(Math.PI * i / steps-Math.PI/2));
yValues[i] = (centerY + radius * Math.sin(Math.PI * i / steps-Math.PI/2));
}
}

Your loop should be set up like this instead:
for (var i = 0; i < steps; i++) {
xValues[i] = (centerX + radius * Math.cos(2 * Math.PI * i / steps));
yValues[i] = (centerY + radius * Math.sin(2 * Math.PI * i / steps));
}
Start your loop at 0
Step through the entire 2 * PI range, not just PI.
You shouldn't have the var xValues = [centerX]; var yValues = [centerY]; -- the center of the circle is not a part of it.

Bresenham's algorithm is way faster. You hear of it in relation to drawing straight lines, but there's a form of the algorithm for circles.
Whether you use that or continue with the trig calculations (which are blazingly fast these days) - you only need to draw 1/8th of the circle. By swapping x,y you can get another 1/8th, and then the negative of x, of y, and of both - swapped and unswapped - gives you points for all the rest of the circle. A speedup of 8x!

Change:
Math.PI * i / steps
to:
2*Math.PI * i / steps
A full circle is 2pi radians, and you are only going to pi radians.

You need to use a partial function to input the radians into cos and sin; therefore take the values you're getting for a quarter or half of the circle, and reflect them over the center points' axis to get your full circle.
That said JavaScript's sin and cos aren't quite as picky, so you must have halved your radian or something; I'd write it as:
function circle(radius, steps, centerX, centerY){
var xValues = [centerX];
var yValues = [centerY];
var table="<tr><th>Step</th><th>X</th><th>Y</th></tr>";
var ctx = document.getElementById("canvas").getContext("2d");
ctx.fillStyle = "red"
ctx.beginPath();
for (var i = 0; i <= steps; i++) {
var radian = (2*Math.PI) * (i/steps);
xValues[i+1] = centerX + radius * Math.cos(radian);
yValues[i+1] = centerY + radius * Math.sin(radian);
if(0==i){ctx.moveTo(xValues[i+1],yValues[i+1]);}else{ctx.lineTo(xValues[i+1],yValues[i+1]);}
table += "<tr><td>" + i + "</td><td>" + xValues[i+1] + "</td><td>" + yValues[i+1] + "</td></tr>";
}
ctx.fill();
return table;
}
document.body.innerHTML="<canvas id=\"canvas\" width=\"300\" height=\"300\"></canvas><table id=\"table\"/>";
document.getElementById("table").innerHTML+=circle(150,15,150,150);
I assumed that for whatever reason you wanted xValues[0] and yValues[0] to be centerX and centerY. I can't figure out why you'd want that, as they're values passed into the function already.

If you already have half a circle, just mirror the points to get the other half
make sure you do this in the right order.
more speficically, for the other half you simply replace the "+ sin(...)" with a "- sin(...)"

I was able to solve it on my own by multiplying the number of steps by 2:
circle: function(radius, steps, centerX, centerY){
var xValues = [centerX];
var yValues = [centerY];
for (var i = 1; i < steps; i++) {
xValues[i] = (centerX + radius * Math.cos(Math.PI * i / steps*2-Math.PI/2));
yValues[i] = (centerY + radius * Math.sin(Math.PI * i / steps*2-Math.PI/2));
}
}