How to find out rotation angle using dot product - javascript

I'm trying to rotate a DIV element using the mousemove event on an HTML page. I want to find a rotation angle using the dot product. I know that it's possible using Math.atan2 too, but I'd like to use dot product in my example.
So far, I tried to implement the following formula:
cos(angle) = dot(a, b) / (length(a) * length(b))
But the below implementation doesn't work well.
What could be the issue?
Thanks
Codepen:
https://codepen.io/1rosehip/pen/qBrLYLo
const $box = document.getElementById('box');
const shapeRect = $box.getBoundingClientRect();
const shapeCenterX = shapeRect.x + shapeRect.width / 2;
const shapeCenterY = shapeRect.y + shapeRect.height / 2;
/**
* get vector magnitude
* #param {Array.<number>} v
* #return {number}
*/
const length = v => {
return Math.sqrt(v[0] ** 2 + v[1] ** 2);
};
/**
* dot product
* #param {Array.<number>} v1
* #param {Array.<number>} v2
* #return {number}
*/
const dot = (v1, v2) => {
return v1[0] * v2[0] + v1[1] * v2[1];
};
/**
* handle rotation
*/
document.addEventListener('mousemove', (evt) => {
// vector #1 - shape center
const centerVector = [shapeCenterX, shapeCenterY];
const centerVectorLength = length(centerVector);
// vector #2 - mouse position
const mouseVector = [evt.pageX, evt.pageY];
const mouseVectorLength = length(mouseVector);
// cos(angle) = dot(a, b) / (length(a) * length(b))
const radians = Math.acos(dot(centerVector, mouseVector) / (centerVectorLength * mouseVectorLength));
const degrees = radians * (180 / Math.PI);
const angle = (degrees + 360) % 360;
$box.style.transform = `rotate(${degrees}deg)`;
});
#box{
position: absolute;
background: #111;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
}
<div id="box"></div>

I've found the issues.
(1) The vectors were defined from the wrong origin (top left corner of the page instead of the shape center).
(2) Math.acos returns results in the range range [0,pi] instead of [0,2*pi].
It should be fixed by (360 - degrees) when the mouse moves to the left and passes the shape center.
The codepen with fixed version:
https://codepen.io/1rosehip/pen/JjWwaYE
const $box = document.getElementById('box');
const shapeRect = $box.getBoundingClientRect();
const shapeCenterX = shapeRect.x + shapeRect.width / 2;
const shapeCenterY = shapeRect.y + shapeRect.height / 2;
/**
* get vector magnitude
* #param {Array.<number>} v
* #return {number}
*/
const length = v => {
return Math.sqrt(v[0] ** 2 + v[1] ** 2);
};
/**
* dot product
* #param {Array.<number>} v1
* #param {Array.<number>} v2
* #return {number}
*/
const dot = (v1, v2) => {
return v1[0] * v2[0] + v1[1] * v2[1];
};
/**
* handle rotation
*/
document.addEventListener('mousemove', (evt) => {
// vector #1 - shape center
const centerVector = [evt.pageX - shapeCenterX, 0 - shapeCenterY];
const centerVectorLength = length(centerVector);
// vector #2 - mouse position
const mouseVector = [evt.pageX - shapeCenterX, evt.pageY - shapeCenterY];
const mouseVectorLength = length(mouseVector);
// cos(angle) = dot(a, b) / (length(a) * length(b))
const radians = Math.acos(dot(centerVector, mouseVector) / (centerVectorLength * mouseVectorLength));
let degrees = radians * (180 / Math.PI);
// const angle = (degrees + 360) % 360;
if(evt.pageX < shapeCenterX){
degrees = 360 - degrees;
}
$box.style.transform = `rotate(${degrees}deg)`;
});
#box{
position: absolute;
background: #111;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
}
<div id="box"></div>

Related

How to implement inverse cosine in react js without using math library?

How can I use inverse cosine here?
const volumeCalculator = () => {
const dens = tank.density;
const lHeight = pressure / (dens * 9.81);
// const resHeight = tank.height - lHeight;
const len = tank.length;
const rad = tank.radius;
const circum = 3.1416 * (rad ** 2);
if (tank.vertical === 'Vertical') {
const volume = circum * lHeight;
return volume;
}
const volume = [Math.acos((rad - lHeight) / rad)(rad * 2) - (rad - lHeight) * Math.sqrt(2 * rad * lHeight - (lHeight * 2))] * len;
return volume;
};
I am expecting inverse cosine result on a number.

How to divide an ellipse to equal angle segments?

the following code is creating svg paths to split a circle into 8 or 24 sections with the same angle at the center of the circle. The factor is only used to create paths that end at the border of the outer rectangle so we end up having a rectangle around the end of all paths.
function get8Or24PiePath(is24Pie, pieChartKind, width, height, customAngle) {
let resultPath = '';
const maxIndex = is24Pie ? 12 : 4;
const circleAngleStep = (2 * Math.PI) / (maxIndex * 2);
const additionalIndexValue = (customAngle / 360) * (maxIndex * 2);
for (let index = 0; index < maxIndex; index++) {
if (!is24Pie || (index + 2) % 3 !== 0) {
const fromIndex = index + 0.5 + additionalIndexValue;
const toIndex = fromIndex + maxIndex;
const factorFrom =
pieChartKind === 'S' || pieChartKind === 'R'
? Math.sqrt(1.0) /
Math.max(
Math.abs(Math.cos(circleAngleStep * fromIndex)),
Math.abs(Math.sin(circleAngleStep * fromIndex)),
)
: 1;
const factorTo =
pieChartKind === 'S' || pieChartKind === 'R'
? Math.sqrt(1.0) /
Math.max(
Math.abs(Math.cos(circleAngleStep * toIndex)),
Math.abs(Math.sin(circleAngleStep * toIndex)),
)
: 1;
const xFrom =
factorFrom * Math.cos(circleAngleStep * fromIndex) * (width * 0.5) + width * 0.5;
const yFrom =
factorFrom * Math.sin(circleAngleStep * fromIndex) * (height * 0.5) + height * 0.5;
const xTo =
factorTo * Math.cos(circleAngleStep * toIndex) * (width * 0.5) + width * 0.5;
const yTo =
factorTo * Math.sin(circleAngleStep * toIndex) * (height * 0.5) + height * 0.5;
resultPath += `M ${xFrom} ${yFrom} L ${xTo} ${yTo} `;
}
}
return resultPath;
}
Circle Example
But if I use the same calculation for an ellipse it will stretch the lines and the angles at the center of the ellipse arent equal anymore. What do I need to change to get the desired behaviour?
Ellipse Example
Seems you calculate circle circumference points, then squeeze coordinates - yes, in this case angles become wrong.
Instead calculate points at ellipse (Polar form relative to center here)
ro(theta) = a * b / sqrt(a^2*sin^2(theta) + b^2*cos^2(theta))
x(theta) = ro * cos(theta)
y(theta) = ro * sin(theta)

Adding up Total Distance traveled in javascript

Using the geolocation plugin for apache cordova / phonegap
Originally from, DaveAlden + Chris Veness
I'm simply trying to sum up the deltaDistMetres. Have been working at it all day but can't figure it out. Tried the push and reduce method with arrays, for loops, try troubleshooting with isNaN(). I'm at your mercy stack overflow pros.
My understanding of deltaDistMetres is the distance between the current gps location and the one before. So summing them up would be the total distance correct?
Thanks for any help!
var currentUpdate, lastUpdate;
function onPositionUpdate(position) {
if (currentUpdate) lastUpdate = currentUpdate;
currentUpdate = {
position: new LatLon(position.coords.latitude, position.coords.longitude),
time: new Date()
};
if (!lastUpdate) return;
currentUpdate.deltaDistMetres = lastUpdate.position.distanceTo(currentUpdate.position) * 1000;
currentUpdate.deltaTimeSecs = (currentUpdate.time - lastUpdate.time) * 1000;
currentUpdate.speed = (currentUpdate.deltaDistMetres / currentUpdate.deltaTimeSecs);
currentUpdate.accelerationGPS = (currentUpdate.speed - lastUpdate.speed) / currentUpdate.deltaTimeSecs;
/* THIS IS MY LITTLE CODE
(I have an element id="log" in my html)
*/
var distanceTotal= 0;
var distanceChange = currentUpdate.deltaDistMetres;
distanceTotal += distanceChange;
document.getElementById("log").innerHTML = "Total distance " + distanceTotal + " m";
}
function onPositionError(error) {
console.log("Error: " + error.message);
}
$(document).on("deviceready", function () {
navigator.geolocation.watchPosition(onPositionUpdate, onPositionError, { frequency:3000, timeout: 30000, enableHighAccuracy: true });
});
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Latitude/longitude spherical geodesy formulae & scripts (c) Chris Veness 2002-2012 */
/* - www.movable-type.co.uk/scripts/latlong.html */
/* */
/* Sample usage: */
/* var p1 = new LatLon(51.5136, -0.0983); */
/* var p2 = new LatLon(51.4778, -0.0015); */
/* var dist = p1.distanceTo(p2); // in km */
/* var brng = p1.bearingTo(p2); // in degrees clockwise from north */
/* ... etc */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Note that minimal error checking is performed in this example code! */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/**
* Object LatLon: tools for geodetic calculations
*
* #requires Geo
*/
/**
* Creates a point on the earth's surface at the supplied latitude / longitude
*
* #constructor
* #param {Number} lat: latitude in degrees
* #param {Number} lon: longitude in degrees
* #param {Number} [radius=6371]: radius of earth if different value is required from standard 6,371km
*/
function LatLon(lat, lon, radius) {
if (typeof (radius) == 'undefined') radius = 6371; // earth's mean radius in km
this.lat = Number(lat);
this.lon = Number(lon);
this.radius = Number(radius);
}
/**
* Returns the distance from this point to the supplied point, in km
* (using Haversine formula)
*
* from: Haversine formula - R. W. Sinnott, "Virtues of the Haversine",
* Sky and Telescope, vol 68, no 2, 1984
*
* #this {LatLon} latitude/longitude of origin point
* #param {LatLon} point: latitude/longitude of destination point
* #param {Number} [precision=4]: number of significant digits to use for returned value
* #returns {Number} distance in km between this point and destination point
*/
LatLon.prototype.distanceTo = function (point, precision) {
// default 4 sig figs reflects typical 0.3% accuracy of spherical model
if (typeof precision == 'undefined') precision = 4;
var R = this.radius;
var φ1 = this.lat.toRadians(), λ1 = this.lon.toRadians();
var φ2 = point.lat.toRadians(), λ2 = point.lon.toRadians();
var Δφ = φ2 - φ1;
var Δλ = λ2 - λ1;
var a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
Math.cos(φ1) * Math.cos(φ2) *
Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d.toPrecisionFixed(Number(precision));
}
/**
* Returns the (initial) bearing from this point to the supplied point, in degrees
* see http://williams.best.vwh.net/avform.htm#Crs
*
* #this {LatLon} latitude/longitude of origin point
* #param {LatLon} point: latitude/longitude of destination point
* #returns {Number} initial bearing in degrees from North
*/
LatLon.prototype.bearingTo = function (point) {
var φ1 = this.lat.toRadians(), φ2 = point.lat.toRadians();
var Δλ = (point.lon - this.lon).toRadians();
var y = Math.sin(Δλ) * Math.cos(φ2);
var x = Math.cos(φ1) * Math.sin(φ2) -
Math.sin(φ1) * Math.cos(φ2) * Math.cos(Δλ);
var θ = Math.atan2(y, x);
return (θ.toDegrees() + 360) % 360;
}
/**
* Returns final bearing arriving at supplied destination point from this point; the final bearing
* will differ from the initial bearing by varying degrees according to distance and latitude
*
* #this {LatLon} latitude/longitude of origin point
* #param {LatLon} point: latitude/longitude of destination point
* #returns {Number} final bearing in degrees from North
*/
LatLon.prototype.finalBearingTo = function (point) {
// get initial bearing from supplied point back to this point...
var φ1 = point.lat.toRadians(), φ2 = this.lat.toRadians();
var Δλ = (this.lon - point.lon).toRadians();
var y = Math.sin(Δλ) * Math.cos(φ2);
var x = Math.cos(φ1) * Math.sin(φ2) -
Math.sin(φ1) * Math.cos(φ2) * Math.cos(Δλ);
var θ = Math.atan2(y, x);
// ... & reverse it by adding 180°
return (θ.toDegrees() + 180) % 360;
}
/**
* Returns the midpoint between this point and the supplied point.
* see http://mathforum.org/library/drmath/view/51822.html for derivation
*
* #this {LatLon} latitude/longitude of origin point
* #param {LatLon} point: latitude/longitude of destination point
* #returns {LatLon} midpoint between this point and the supplied point
*/
LatLon.prototype.midpointTo = function (point) {
var φ1 = this.lat.toRadians(), λ1 = this.lon.toRadians();
var φ2 = point.lat.toRadians();
var Δλ = (point.lon - this.lon).toRadians();
var Bx = Math.cos(φ2) * Math.cos(Δλ);
var By = Math.cos(φ2) * Math.sin(Δλ);
var φ3 = Math.atan2(Math.sin(φ1) + Math.sin(φ2),
Math.sqrt((Math.cos(φ1) + Bx) * (Math.cos(φ1) + Bx) + By * By));
var λ3 = λ1 + Math.atan2(By, Math.cos(φ1) + Bx);
λ3 = (λ3 + 3 * Math.PI) % (2 * Math.PI) - Math.PI; // normalise to -180..+180º
return new LatLon(φ3.toDegrees(), λ3.toDegrees());
}
/**
* Returns the destination point from this point having travelled the given distance (in km) on the
* given initial bearing (bearing may vary before destination is reached)
*
* see http://williams.best.vwh.net/avform.htm#LL
*
* #this {LatLon} latitude/longitude of origin point
* #param {Number} brng: initial bearing in degrees
* #param {Number} dist: distance in km
* #returns {LatLon} destination point
*/
LatLon.prototype.destinationPoint = function (brng, dist) {
var θ = Number(brng).toRadians();
var δ = Number(dist) / this.radius; // angular distance in radians
var φ1 = this.lat.toRadians();
var λ1 = this.lon.toRadians();
var φ2 = Math.asin(Math.sin(φ1) * Math.cos(δ) +
Math.cos(φ1) * Math.sin(δ) * Math.cos(θ));
var λ2 = λ1 + Math.atan2(Math.sin(θ) * Math.sin(δ) * Math.cos(φ1),
Math.cos(δ) - Math.sin(φ1) * Math.sin(φ2));
λ2 = (λ2 + 3 * Math.PI) % (2 * Math.PI) - Math.PI; // normalise to -180..+180º
return new LatLon(φ2.toDegrees(), λ2.toDegrees());
}
/**
* Returns the point of intersection of two paths defined by point and bearing
*
* see http://williams.best.vwh.net/avform.htm#Intersection
*
* #param {LatLon} p1: first point
* #param {Number} brng1: initial bearing from first point
* #param {LatLon} p2: second point
* #param {Number} brng2: initial bearing from second point
* #returns {LatLon} destination point (null if no unique intersection defined)
*/
LatLon.intersection = function (p1, brng1, p2, brng2) {
var φ1 = p1.lat.toRadians(), λ1 = p1.lon.toRadians();
var φ2 = p2.lat.toRadians(), λ2 = p2.lon.toRadians();
var θ13 = Number(brng1).toRadians(), θ23 = Number(brng2).toRadians();
var Δφ = φ2 - φ1, Δλ = λ2 - λ1;
var δ12 = 2 * Math.asin(Math.sqrt(Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2)));
if (δ12 == 0) return null;
// initial/final bearings between points
var θ1 = Math.acos((Math.sin(φ2) - Math.sin(φ1) * Math.cos(δ12)) /
(Math.sin(δ12) * Math.cos(φ1)));
if (isNaN(θ1)) θ1 = 0; // protect against rounding
var θ2 = Math.acos((Math.sin(φ1) - Math.sin(φ2) * Math.cos(δ12)) /
(Math.sin(δ12) * Math.cos(φ2)));
if (Math.sin(λ2 - λ1) > 0) {
θ12 = θ1;
θ21 = 2 * Math.PI - θ2;
} else {
θ12 = 2 * Math.PI - θ1;
θ21 = θ2;
}
var α1 = (θ13 - θ12 + Math.PI) % (2 * Math.PI) - Math.PI; // angle 2-1-3
var α2 = (θ21 - θ23 + Math.PI) % (2 * Math.PI) - Math.PI; // angle 1-2-3
if (Math.sin(α1) == 0 && Math.sin(α2) == 0) return null; // infinite intersections
if (Math.sin(α1) * Math.sin(α2) < 0) return null; // ambiguous intersection
//α1 = Math.abs(α1);
//α2 = Math.abs(α2);
// ... Ed Williams takes abs of α1/α2, but seems to break calculation?
var α3 = Math.acos(-Math.cos(α1) * Math.cos(α2) +
Math.sin(α1) * Math.sin(α2) * Math.cos(δ12));
var δ13 = Math.atan2(Math.sin(δ12) * Math.sin(α1) * Math.sin(α2),
Math.cos(α2) + Math.cos(α1) * Math.cos(α3))
var φ3 = Math.asin(Math.sin(φ1) * Math.cos(δ13) +
Math.cos(φ1) * Math.sin(δ13) * Math.cos(θ13));
var Δλ13 = Math.atan2(Math.sin(θ13) * Math.sin(δ13) * Math.cos(φ1),
Math.cos(δ13) - Math.sin(φ1) * Math.sin(φ3));
var λ3 = λ1 + Δλ13;
λ3 = (λ3 + 3 * Math.PI) % (2 * Math.PI) - Math.PI; // normalise to -180..+180º
return new LatLon(φ3.toDegrees(), λ3.toDegrees());
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/**
* Returns the distance from this point to the supplied point, in km, travelling along a rhumb line
*
* see http://williams.best.vwh.net/avform.htm#Rhumb
*
* #this {LatLon} latitude/longitude of origin point
* #param {LatLon} point: latitude/longitude of destination point
* #returns {Number} distance in km between this point and destination point
*/
LatLon.prototype.rhumbDistanceTo = function (point) {
var R = this.radius;
var φ1 = this.lat.toRadians(), φ2 = point.lat.toRadians();
var Δφ = φ2 - φ1;
var Δλ = Math.abs(point.lon - this.lon).toRadians();
// if dLon over 180° take shorter rhumb line across the anti-meridian:
if (Math.abs(Δλ) > Math.PI) Δλ = Δλ > 0 ? -(2 * Math.PI - Δλ) : (2 * Math.PI + Δλ);
// on Mercator projection, longitude gets increasing stretched by latitude; q is the 'stretch factor'
var Δψ = Math.log(Math.tan(φ2 / 2 + Math.PI / 4) / Math.tan(φ1 / 2 + Math.PI / 4));
// the stretch factor becomes ill-conditioned along E-W line (0/0); use empirical tolerance to avoid it
var q = Math.abs(Δψ) > 10e-12 ? Δφ / Δψ : Math.cos(φ1);
// distance is pythagoras on 'stretched' Mercator projection
var δ = Math.sqrt(Δφ * Δφ + q * q * Δλ * Δλ); // angular distance in radians
var dist = δ * R;
return dist.toPrecisionFixed(4); // 4 sig figs reflects typical 0.3% accuracy of spherical model
}
/**
* Returns the bearing from this point to the supplied point along a rhumb line, in degrees
*
* #this {LatLon} latitude/longitude of origin point
* #param {LatLon} point: latitude/longitude of destination point
* #returns {Number} bearing in degrees from North
*/
LatLon.prototype.rhumbBearingTo = function (point) {
var φ1 = this.lat.toRadians(), φ2 = point.lat.toRadians();
var Δλ = (point.lon - this.lon).toRadians();
// if dLon over 180° take shorter rhumb line across the anti-meridian:
if (Math.abs(Δλ) > Math.PI) Δλ = Δλ > 0 ? -(2 * Math.PI - Δλ) : (2 * Math.PI + Δλ);
var Δψ = Math.log(Math.tan(φ2 / 2 + Math.PI / 4) / Math.tan(φ1 / 2 + Math.PI / 4));
var θ = Math.atan2(Δλ, Δψ);
return (θ.toDegrees() + 360) % 360;
}
/**
* Returns the destination point from this point having travelled the given distance (in km) on the
* given bearing along a rhumb line
*
* #this {LatLon} latitude/longitude of origin point
* #param {Number} brng: bearing in degrees from North
* #param {Number} dist: distance in km
* #returns {LatLon} destination point
*/
LatLon.prototype.rhumbDestinationPoint = function (brng, dist) {
var δ = Number(dist) / this.radius; // angular distance in radians
var φ1 = this.lat.toRadians(), λ1 = this.lon.toRadians();
var θ = Number(brng).toRadians();
var Δφ = δ * Math.cos(θ);
var φ2 = φ1 + Δφ;
// check for some daft bugger going past the pole, normalise latitude if so
if (Math.abs(φ2) > Math.PI / 2) φ2 = φ2 > 0 ? Math.PI - φ2 : -Math.PI - φ2;
var Δψ = Math.log(Math.tan(φ2 / 2 + Math.PI / 4) / Math.tan(φ1 / 2 + Math.PI / 4));
var q = Math.abs(Δψ) > 10e-12 ? Δφ / Δψ : Math.cos(φ1); // E-W course becomes ill-conditioned with 0/0
var Δλ = δ * Math.sin(θ) / q;
var λ2 = λ1 + Δλ;
λ2 = (λ2 + 3 * Math.PI) % (2 * Math.PI) - Math.PI; // normalise to -180..+180º
return new LatLon(φ2.toDegrees(), λ2.toDegrees());
}
/**
* Returns the loxodromic midpoint (along a rhumb line) between this point and the supplied point.
* see http://mathforum.org/kb/message.jspa?messageID=148837
*
* #this {LatLon} latitude/longitude of origin point
* #param {LatLon} point: latitude/longitude of destination point
* #returns {LatLon} midpoint between this point and the supplied point
*/
LatLon.prototype.rhumbMidpointTo = function (point) {
var φ1 = this.lat.toRadians(), λ1 = this.lon.toRadians();
var φ2 = point.lat.toRadians(), λ2 = point.lon.toRadians();
if (Math.abs(λ2 - λ1) > Math.PI) λ1 += 2 * Math.PI; // crossing anti-meridian
var φ3 = (φ1 + φ2) / 2;
var f1 = Math.tan(Math.PI / 4 + φ1 / 2);
var f2 = Math.tan(Math.PI / 4 + φ2 / 2);
var f3 = Math.tan(Math.PI / 4 + φ3 / 2);
var λ3 = ((λ2 - λ1) * Math.log(f3) + λ1 * Math.log(f2) - λ2 * Math.log(f1)) / Math.log(f2 / f1);
if (!isFinite(λ3)) λ3 = (λ1 + λ2) / 2; // parallel of latitude
λ3 = (λ3 + 3 * Math.PI) % (2 * Math.PI) - Math.PI; // normalise to -180..+180º
return new LatLon(φ3.toDegrees(), λ3.toDegrees());
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/**
* Returns a string representation of this point; format and dp as per lat()/lon()
*
* #this {LatLon} latitude/longitude of origin point
* #param {String} [format]: return value as 'd', 'dm', 'dms'
* #param {Number} [dp=0|2|4]: number of decimal places to display
* #returns {String} comma-separated latitude/longitude
*/
LatLon.prototype.toString = function (format, dp) {
if (typeof format == 'undefined') format = 'dms';
return Geo.toLat(this.lat, format, dp) + ', ' + Geo.toLon(this.lon, format, dp);
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
// ---- extend Number object with methods for converting degrees/radians
/** Converts numeric degrees to radians */
if (typeof Number.prototype.toRadians == 'undefined') {
Number.prototype.toRadians = function () {
return this * Math.PI / 180;
}
}
/** Converts radians to numeric (signed) degrees */
if (typeof Number.prototype.toDegrees == 'undefined') {
Number.prototype.toDegrees = function () {
return this * 180 / Math.PI;
}
}
/**
* Formats the significant digits of a number, using only fixed-point notation (no exponential)
*
* #param {Number} precision: Number of significant digits to appear in the returned string
* #returns {String} A string representation of number which contains precision significant digits
*/
if (typeof Number.prototype.toPrecisionFixed == 'undefined') {
Number.prototype.toPrecisionFixed = function (precision) {
// use standard toPrecision method
var n = this.toPrecision(precision);
// ... but replace +ve exponential format with trailing zeros
n = n.replace(/(.+)e\+(.+)/, function (n, sig, exp) {
sig = sig.replace(/\./, ''); // remove decimal from significand
l = sig.length - 1;
while (exp-- > l) sig = sig + '0'; // append zeros from exponent
return sig;
});
// ... and replace -ve exponential format with leading zeros
n = n.replace(/(.+)e-(.+)/, function (n, sig, exp) {
sig = sig.replace(/\./, ''); // remove decimal from significand
while (exp-- > 1) sig = '0' + sig; // prepend zeros from exponent
return '0.' + sig;
});
return n;
}
}
/** Trims whitespace from string (q.v. blog.stevenlevithan.com/archives/faster-trim-javascript) */
if (typeof String.prototype.trim == 'undefined') {
String.prototype.trim = function () {
return String(this).replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
if (!window.console) window.console = { log: function () { } };
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Geodesy representation conversion functions (c) Chris Veness 2002-2012 */
/* - www.movable-type.co.uk/scripts/latlong.html */
/* */
/* Sample usage: */
/* var lat = Geo.parseDMS('51° 28′ 40.12″ N'); */
/* var lon = Geo.parseDMS('000° 00′ 05.31″ W'); */
/* var p1 = new LatLon(lat, lon); */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
var Geo = {}; // Geo namespace, representing static class
/**
* Parses string representing degrees/minutes/seconds into numeric degrees
*
* This is very flexible on formats, allowing signed decimal degrees, or deg-min-sec optionally
* suffixed by compass direction (NSEW). A variety of separators are accepted (eg 3º 37' 09"W)
* or fixed-width format without separators (eg 0033709W). Seconds and minutes may be omitted.
* (Note minimal validation is done).
*
* #param {String|Number} dmsStr: Degrees or deg/min/sec in variety of formats
* #returns {Number} Degrees as decimal number
* #throws {TypeError} dmsStr is an object, perhaps DOM object without .value?
*/
Geo.parseDMS = function (dmsStr) {
if (typeof deg == 'object') throw new TypeError('Geo.parseDMS - dmsStr is [DOM?] object');
// check for signed decimal degrees without NSEW, if so return it directly
if (typeof dmsStr === 'number' && isFinite(dmsStr)) return Number(dmsStr);
// strip off any sign or compass dir'n & split out separate d/m/s
var dms = String(dmsStr).trim().replace(/^-/, '').replace(/[NSEW]$/i, '').split(/[^0-9.,]+/);
if (dms[dms.length - 1] == '') dms.splice(dms.length - 1); // from trailing symbol
if (dms == '') return NaN;
// and convert to decimal degrees...
switch (dms.length) {
case 3: // interpret 3-part result as d/m/s
var deg = dms[0] / 1 + dms[1] / 60 + dms[2] / 3600;
break;
case 2: // interpret 2-part result as d/m
var deg = dms[0] / 1 + dms[1] / 60;
break;
case 1: // just d (possibly decimal) or non-separated dddmmss
var deg = dms[0];
// check for fixed-width unseparated format eg 0033709W
//if (/[NS]/i.test(dmsStr)) deg = '0' + deg; // - normalise N/S to 3-digit degrees
//if (/[0-9]{7}/.test(deg)) deg = deg.slice(0,3)/1 + deg.slice(3,5)/60 + deg.slice(5)/3600;
break;
default:
return NaN;
}
if (/^-|[WS]$/i.test(dmsStr.trim())) deg = -deg; // take '-', west and south as -ve
return Number(deg);
}
/**
* Convert decimal degrees to deg/min/sec format
* - degree, prime, double-prime symbols are added, but sign is discarded, though no compass
* direction is added
*
* #private
* #param {Number} deg: Degrees
* #param {String} [format=dms]: Return value as 'd', 'dm', 'dms'
* #param {Number} [dp=0|2|4]: No of decimal places to use - default 0 for dms, 2 for dm, 4 for d
* #returns {String} deg formatted as deg/min/secs according to specified format
* #throws {TypeError} deg is an object, perhaps DOM object without .value?
*/
Geo.toDMS = function (deg, format, dp) {
if (typeof deg == 'object') throw new TypeError('Geo.toDMS - deg is [DOM?] object');
if (isNaN(deg)) return null; // give up here if we can't make a number from deg
// default values
if (typeof format == 'undefined') format = 'dms';
if (typeof dp == 'undefined') {
switch (format) {
case 'd': dp = 4; break;
case 'dm': dp = 2; break;
case 'dms': dp = 0; break;
default: format = 'dms'; dp = 0; // be forgiving on invalid format
}
}
deg = Math.abs(deg); // (unsigned result ready for appending compass dir'n)
switch (format) {
case 'd':
d = deg.toFixed(dp); // round degrees
if (d < 100) d = '0' + d; // pad with leading zeros
if (d < 10) d = '0' + d;
dms = d + '\u00B0'; // add º symbol
break;
case 'dm':
var min = (deg * 60).toFixed(dp); // convert degrees to minutes & round
var d = Math.floor(min / 60); // get component deg/min
var m = (min % 60).toFixed(dp); // pad with trailing zeros
if (d < 100) d = '0' + d; // pad with leading zeros
if (d < 10) d = '0' + d;
if (m < 10) m = '0' + m;
dms = d + '\u00B0' + m + '\u2032'; // add º, ' symbols
break;
case 'dms':
var sec = (deg * 3600).toFixed(dp); // convert degrees to seconds & round
var d = Math.floor(sec / 3600); // get component deg/min/sec
var m = Math.floor(sec / 60) % 60;
var s = (sec % 60).toFixed(dp); // pad with trailing zeros
if (d < 100) d = '0' + d; // pad with leading zeros
if (d < 10) d = '0' + d;
if (m < 10) m = '0' + m;
if (s < 10) s = '0' + s;
dms = d + '\u00B0' + m + '\u2032' + s + '\u2033'; // add º, ', " symbols
break;
}
return dms;
}
/**
* Convert numeric degrees to deg/min/sec latitude (suffixed with N/S)
*
* #param {Number} deg: Degrees
* #param {String} [format=dms]: Return value as 'd', 'dm', 'dms'
* #param {Number} [dp=0|2|4]: No of decimal places to use - default 0 for dms, 2 for dm, 4 for d
* #returns {String} Deg/min/seconds
*/
Geo.toLat = function (deg, format, dp) {
var lat = Geo.toDMS(deg, format, dp);
return lat == null ? '–' : lat.slice(1) + (deg < 0 ? 'S' : 'N'); // knock off initial '0' for lat!
}
/**
* Convert numeric degrees to deg/min/sec longitude (suffixed with E/W)
*
* #param {Number} deg: Degrees
* #param {String} [format=dms]: Return value as 'd', 'dm', 'dms'
* #param {Number} [dp=0|2|4]: No of decimal places to use - default 0 for dms, 2 for dm, 4 for d
* #returns {String} Deg/min/seconds
*/
Geo.toLon = function (deg, format, dp) {
var lon = Geo.toDMS(deg, format, dp);
return lon == null ? '–' : lon + (deg < 0 ? 'W' : 'E');
}
/**
* Convert numeric degrees to deg/min/sec as a bearing (0º..360º)
*
* #param {Number} deg: Degrees
* #param {String} [format=dms]: Return value as 'd', 'dm', 'dms'
* #param {Number} [dp=0|2|4]: No of decimal places to use - default 0 for dms, 2 for dm, 4 for d
* #returns {String} Deg/min/seconds
*/
Geo.toBrng = function (deg, format, dp) {
deg = (Number(deg) + 360) % 360; // normalise -ve values to 180º..360º
var brng = Geo.toDMS(deg, format, dp);
return brng == null ? '–' : brng.replace('360', '0'); // just in case rounding took us up to 360º!
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
if (!window.console) window.console = { log: function () { } };
You have placed the declaration var distanceTotal= 0; inside onPositionUpdate() which means it will be reset to zero on every position update.
To preserve the previous value, declare it outside of onPositionUpdate:
var currentUpdate, lastUpdate;
var distanceTotal= 0;
function onPositionUpdate(position) {
if (currentUpdate) lastUpdate = currentUpdate;
currentUpdate = {
position: new LatLon(position.coords.latitude, position.coords.longitude),
time: new Date()
};
if (!lastUpdate) return;
currentUpdate.deltaDistMetres = lastUpdate.position.distanceTo(currentUpdate.position) * 1000;
currentUpdate.deltaTimeSecs = (currentUpdate.time - lastUpdate.time) * 1000;
currentUpdate.speed = (currentUpdate.deltaDistMetres / currentUpdate.deltaTimeSecs);
currentUpdate.accelerationGPS = (currentUpdate.speed - lastUpdate.speed) / currentUpdate.deltaTimeSecs;
/* THIS IS MY LITTLE CODE
(I have an element id="log" in my html)
*/
var distanceChange = currentUpdate.deltaDistMetres;
distanceTotal += distanceChange;
document.getElementById("log").innerHTML = "Total distance " + distanceTotal + " m";
}
function onPositionError(error) {
console.log("Error: " + error.message);
}
$(document).on("deviceready", function () {
navigator.geolocation.watchPosition(onPositionUpdate, onPositionError, { frequency:3000, timeout: 30000, enableHighAccuracy: true });
});

How to find the angle between two locations defined by latitude or longitude using javascript? [duplicate]

I want to calculate the bearing from point 1 to point 2
The input format is 52.070564 - 4.407116
No matter what i try i cannot get an correct output.
The formula i use is :
// koers berekenen
var y = Math.sin(ln-ln1) * Math.cos(lt);
var x = Math.cos(lt1)*Math.sin(lt) -
Math.sin(lt1)*Math.cos(lt)*Math.cos(ln-ln1);
var radians = Math.atan2(y, x);
var bearing = Math.round(radians * (180/Math.PI));
/* >>>>>> original <<<<<<<
var y = Math.sin(λ2-λ1) * Math.cos(φ2);
var x = Math.cos(φ1)*Math.sin(φ2) -
Math.sin(φ1)*Math.cos(φ2)*Math.cos(λ2-λ1);
var brng = Math.atan2(y, x).toDegrees();
φ1,λ1 is the start point, φ2,λ2 the end point (Δλ is the difference in longitude)
*/
You can calculate bearing using this functions:
// Converts from degrees to radians.
function toRadians(degrees) {
return degrees * Math.PI / 180;
};
// Converts from radians to degrees.
function toDegrees(radians) {
return radians * 180 / Math.PI;
}
function bearing(startLat, startLng, destLat, destLng){
startLat = toRadians(startLat);
startLng = toRadians(startLng);
destLat = toRadians(destLat);
destLng = toRadians(destLng);
y = Math.sin(destLng - startLng) * Math.cos(destLat);
x = Math.cos(startLat) * Math.sin(destLat) -
Math.sin(startLat) * Math.cos(destLat) * Math.cos(destLng - startLng);
brng = Math.atan2(y, x);
brng = toDegrees(brng);
return (brng + 360) % 360;
}
start_latitude = 12.9389352
start_longitude = 77.6994306
stop_latitude = 12.939103
stop_longitude = 77.705825
var y = Math.sin(stop_longitude-start_longitude) * Math.cos(stop_latitude);
var x = Math.cos(start_latitude)*Math.sin(stop_latitude) -
Math.sin(start_latitude)*Math.cos(stop_latitude)*Math.cos(stop_longitude-start_longitude);
var brng = Math.atan2(y, x) * 180 / Math.PI;
alert("Bearing in degreee: " + brng);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

A JavaScript function that returns the x,y points of intersection between two circles?

I got the (x,y) center location of two circles and their radius but I need to find their intersection points (marked with red) using JavaScript.
I think the best explanation as far as the math is concerned is found here (Intersection of two circles), but I don't really understand the math so I'm not able to implement it.
For example d = ||P1 - P0|| , what do the || stand for? Does it mean that the resulting number is always a positive?
And also P2 = P0 + a ( P1 - P0 ) / d , aren't the P's here something like (10, 50)? But doing (10,50)+13 in JavaScript gives you 63, so it just ignores the first number, so what's suppose to happen? Should the outcome be (23,63) here or? And also the P1-P0 part or (40,30)-(10,60), how do you express that in JavaScript?
Translated the C function on the site to JavaScript:
function intersection(x0, y0, r0, x1, y1, r1) {
var a, dx, dy, d, h, rx, ry;
var x2, y2;
/* dx and dy are the vertical and horizontal distances between
* the circle centers.
*/
dx = x1 - x0;
dy = y1 - y0;
/* Determine the straight-line distance between the centers. */
d = Math.sqrt((dy*dy) + (dx*dx));
/* Check for solvability. */
if (d > (r0 + r1)) {
/* no solution. circles do not intersect. */
return false;
}
if (d < Math.abs(r0 - r1)) {
/* no solution. one circle is contained in the other */
return false;
}
/* 'point 2' is the point where the line through the circle
* intersection points crosses the line between the circle
* centers.
*/
/* Determine the distance from point 0 to point 2. */
a = ((r0*r0) - (r1*r1) + (d*d)) / (2.0 * d) ;
/* Determine the coordinates of point 2. */
x2 = x0 + (dx * a/d);
y2 = y0 + (dy * a/d);
/* Determine the distance from point 2 to either of the
* intersection points.
*/
h = Math.sqrt((r0*r0) - (a*a));
/* Now determine the offsets of the intersection points from
* point 2.
*/
rx = -dy * (h/d);
ry = dx * (h/d);
/* Determine the absolute intersection points. */
var xi = x2 + rx;
var xi_prime = x2 - rx;
var yi = y2 + ry;
var yi_prime = y2 - ry;
return [xi, xi_prime, yi, yi_prime];
}
Based on AutoMonkey's answer I made some adjustments to give some more information in the response and also handle when the circles are the same.
/**
* #description Get information about the intersection points of a circle.
* Adapted from: https://stackoverflow.com/a/12221389/5553768.
* #param {Object} c1 An object describing the first circle.
* #param {float} c1.x The x coordinate of the circle.
* #param {float} c1.y The y coordinate of the circle.
* #param {float} c1.r The radius of the circle.
* #param {Object} c2 An object describing the second circle.
* #param {float} c2.x The x coordinate of the circle.
* #param {float} c2.y The y coordinate of the circle.
* #param {float} c2.r The radius of the circle.
* #returns {Object} Data about the intersections of the circles.
*/
function intersection(c1, c2) {
// Start constructing the response object.
const result = {
intersect_count: 0,
intersect_occurs: true,
one_is_in_other: false,
are_equal: false,
point_1: { x: null, y: null },
point_2: { x: null, y: null },
};
// Get vertical and horizontal distances between circles.
const dx = c2.x - c1.x;
const dy = c2.y - c1.y;
// Calculate the distance between the circle centers as a straight line.
const dist = Math.hypot(dy, dx);
// Check if circles intersect.
if (dist > c1.r + c2.r) {
result.intersect_occurs = false;
}
// Check one circle isn't inside the other.
if (dist < Math.abs(c1.r - c2.r)) {
result.intersect_occurs = false;
result.one_is_in_other = true;
}
// Check if circles are the same.
if (c1.x === c2.x && c1.y === c2.y && c1.r === c2.r) {
result.are_equal = true;
result.are_equal = true;
}
// Find the intersection points
if (result.intersect_occurs) {
// Centroid is the pt where two lines cross. A line between the circle centers
// and a line between the intersection points.
const centroid = (c1.r * c1.r - c2.r * c2.r + dist * dist) / (2.0 * dist);
// Get the coordinates of centroid.
const x2 = c1.x + (dx * centroid) / dist;
const y2 = c1.y + (dy * centroid) / dist;
// Get the distance from centroid to the intersection points.
const h = Math.sqrt(c1.r * c1.r - centroid * centroid);
// Get the x and y dist of the intersection points from centroid.
const rx = -dy * (h / dist);
const ry = dx * (h / dist);
// Get the intersection points.
result.point_1.x = Number((x2 + rx).toFixed(15));
result.point_1.y = Number((y2 + ry).toFixed(15));
result.point_2.x = Number((x2 - rx).toFixed(15));
result.point_2.y = Number((y2 - ry).toFixed(15));
// Add intersection count to results
if (result.are_equal) {
result.intersect_count = null;
} else if (result.point_1.x === result.point_2.x && result.point_1.y === result.point_2.y) {
result.intersect_count = 1;
} else {
result.intersect_count = 2;
}
}
return result;
}
Usage:
intersection(
{x: 1, y: 1, r: 2},
{x: 0, y: -1, r: 1}
)
// Result
result = {
intersect_count: 2,
intersect_occurs: true,
one_is_in_other: false,
are_equal: false,
point_1: { x: 1, y: -1 },
point_2: { x: -0.6, y: -0.2 },
}
Confirmation:
https://www.desmos.com/calculator/cj12hc9jsk

Categories

Resources