We Keep Coding

How to get x, y distance from a circle

I've drawn a square shape whose width & length 20x, or 20y then I have drawn a circle inside the square whose radius 10x. Now a ray from the center of the circle went through the boundary of the circle at 45-degree angle (it can be 38 degrees or anything). Now how can i get x & y distance of connection ground of ray & circle from the square shape?
I've tried this code:
var radius = 10 //radius,
x = Math.cos(Math.PI * 45 / 180) * radius
y = Math.sin(Math.PI * 45 / 180) * radius
I'm not getting the exact distance with this code, what is the currect way to get this x & y distance?

It seems that your coord origin is the top left of the enclosing square and the y axis is oriented downwards.
In that case,
var radius = 10 //radius,
x = radius + Math.cos(Math.PI * 45 / 180) * radius
y = radius - Math.sin(Math.PI * 45 / 180) * radius

[update]
you can get the x & y distances using this formulas:
var radius = 10 //radius,
var angle = 90
var d = Math.PI/180 //to convert deg to rads
if (0 <= angle & angle <= 45){
deg = angle * d
x = radius * Math.cos(deg)
y = radius * Math.sin(deg)
}else if( 45 < angle & angle <= 90){
deg = (90-angle) * d
x = radius * Math.cos(deg)
y = radius * Math.sin(deg)
}
console.log("x = " + x)
console.log("y = " + y)
If the angle is less than 45° we use the normal formulas as shown in the code.
But if the angle is greater than 45° we have to use the angle between the line and the y-axis which equal to 90-(angle value).
I hope this will solve your problem.

After someone's edit, your post contains the correct expressions for calculating x and y coordinates from the center of the circle ("from center" row in the table). In order to get the "remaining" part to the edges of its bounding square ("to border" row in the table), these distances can be subtracted from the radius:
function calculate(){
var radius=document.getElementById("radius").valueAsNumber||10;
var radians=document.getElementById("degrees").valueAsNumber*Math.PI/180||0;
document.getElementById("x1").innerHTML=radius*Math.cos(radians);
document.getElementById("y1").innerHTML=radius*Math.sin(radians);
document.getElementById("x2").innerHTML=radius-radius*Math.cos(radians)
document.getElementById("y2").innerHTML=radius-radius*Math.sin(radians)
}
<input type="number" placeholder="radius" id="radius"><br>
<input type="number" placeholder="degrees" id="degrees"><br>
<button onclick="calculate()">Calculate</button><br>
<table border="1">
<tr><th></th><th>x</th><th>y</th></tr>
<tr><th>from center</th><td id="x1"></td><td id="y1"></td></tr>
<tr><th>to border</th><td id="x2"></td><td id="y2"></td></tr>
</table>

With HTML5 canvas, how to calculate the final point coordinates with an offset?

On a HTML5 canvas object, I have to subtract a distance from a destination point, to give the final destination on the same line.
So, first I have calculated the distance between the source and target points, with the Pythagorean theorem, but my memories of Thales's theorem are too faulty to find the final point (on same line), with the right x and y attributes.
function getDistance (from, to){
return Math.hypot(to.x - from.x, to.y - from.y);
}
function getFinalTo (from, to, distanceToSubstract){
//with Pythagore we obtain the distance between the 2 points
var originalDistance = getDistance(from, to);
var finalDistance = originalDistance - distanceToSubstract;
//Now, I was thinking about Thales but all my tries are wrong
//Here some of ones, I need to get finalTo properties to draw an arrow to a node without
var finalTo = new Object;
finalTo.x = ((1 - finalDistance) * from.x) + (finalDistance * to.x);
finalTo.y = ((1 - finalDistance) * from.y) + (finalDistance * to.y);
return finalTo;
}
Indeed, the arrowhead be hidden by the round node that can be about 100 pixels of radius, so I try to get the final point.
Thanks a lot.
Regards,

Will depend on the line cap. For "butt" there is no change, for "round" and "square" you the line extends by half the width at each end
The following function shortens the line to fit depending on the line cap.
drawLine(x1,y1,x2,y2){
// get vector from start to end
var x = x2-x1;
var y = y2-y1;
// get length
const len = Math.hypot(x,y) * 2; // *2 because we want half the width
// normalise vector
x /= len;
y /= len;
if(ctx.lineCap !== "butt"){
// shorten both ends to fit the length
const lw = ctx.lineWidth;
x1 += x * lw;
y1 += y * lw;
x2 -= x * lw;
y2 -= y * lw;
}
ctx.beginPath()
ctx.lineTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
}
For miter joins the following answer will help https://stackoverflow.com/a/41184052/3877726

You can use simple proportion by distance ratio:
(I did not account for round cap)
ratio = finalDistance / originalDistance
finalTo.x = from.x + (to.x - from.x) * ratio;
finalTo.y = from.y + (to.y - from.y) * ratio;
Your approach was attempt to use linear interpolation, but you erroneously mixed distances (in pixels, meters etc) with ratios (dimensionless - is this term right?)
ratio = finalDistance / originalDistance
finalTo.x = ((1 - ratio) * from.x) + (ratio * to.x);
finalTo.y = ((1 - ratio) * from.y) + (ratio * to.y);
Note that both approaches is really the same formula.

rotate only an image in a canvas

I'm trying to rotate an image inside a canvas.
Here's my Fiddle: https://jsfiddle.net/kevinludwig11/s6rgpjm9/
I try it with save and restore, but the path is also rotating.
The falcon should fly with his face towards and change the angle in the corners.
Can anybody help me?
Edit: One solution i've found: save the image 360 times with every rotation and load every image in the right position. But i think thats not the smartest solution.

Canvas 2D image lookat transform.
No need to create 360 images to rotate a single image. Also you had a few incorrect ways of doing things.
Code problems
Only load the image once. You were loading it each time it was rendered.
Use requestAnimationFrame on its own. Putting it inside a timer makes its use completely redundant.
If you find yourself typing in long lists of numbers, and especially if you repeat these numbers in other sections of code you should use a single store to hold everything. Eg your paths were all hand coded. Move them into an array then iterate the array for the various things you need to do with the paths. One of the top ten programing rules. "Don't repeat/duplicate anything."
The lookat transform
To do the bird you will need to get the direction it is heading towards so I added a second point on the curves that is ahead of the bird. With these two points (birds pos and lookat pos) I then create a transformation using the lookat direction as the xAxis of the transformation. See function drawImageLookat(image,pos,lookat) I found that the image is not along the X axis so I rotate the bird 90deg after finding the lookat transformation.
Lookat function
// function assumes front (forward) of image is along the x axis to the right
function drawImageLookat(image, point, lookat ) {
var xAx,xAy; // vector for x Axis of image
var x,y;
x = lookat.x - point.x;
y = lookat.y - point.y;
var dist = Math.max(0.01,Math.sqrt(x * x + y * y)); // Math.max to avoid zero which will create NaN
xAx = x / dist; // get x component of x Axis
xAy = y / dist; // get y component of x Axis
// y axis is at 90 deg so dont need y axis vector
ctx.setTransform( // position the image using transform
xAx, xAy, // set direction of x Axis
-xAy, xAx, // set direction oy y axis
point.x, point.y
);
ctx.drawImage(image, -image.width / 2, -image.height / 2);
}
Demo from fiddle.
Your code that I took from the fiddle https://jsfiddle.net/kevinludwig11/s6rgpjm9/ and modified to run as your question implies.
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// only load image once
var birdImage = new Image();
birdImage.src = 'http://www.happy-innovation.de/images/Falke_Flug.png';
birdImage.onload = function(){animate()}; // start animation when image has loaded
// set starting values
var speed = 0.25
var percent = speed;
var direction = speed;
var length = 300;
function animate() {
ctx.setTransform(1,0,0,1,0,0); // restore default transform incase its not
ctx.clearRect(0, 0, canvas.width, canvas.height);
percent += direction;
// need to keep the position away from the ends as there is no lookat beyond the path.
if(percent >= length - speed){
percent = length- speed;
direction = -speed;
}else if(percent <= speed){
percent = speed;
direction = speed;
}
draw(percent,direction);
requestAnimationFrame(animate);
}
function P(x,y){return {x,y}}; // quick way to create a point
var paths = [
{col : 'red', points : [P(100, 200), P(600, 350), P( 700, 400)]},
{col : "green", points : [P(700, 400), P( 900, 500), P( 200, 600), P( 950, 900)]},
{col : "blue", points : [P(950, 900), P(1200, 950), P( 300, 200), P( 150, 1200)]},
{col : "brown", points : [P(150, 1200),P( 120, 1700),P( 1000, 700),P(850, 1500)]},
{col : "Purple",points : [P(850, 1500),P(800, 1900), P( 200, 900), P( 250, 1800)]},
{col : "yellow", points : [P(250, 1800),P(250, 1950), P( 600, 1500),P(950, 1800)]},
]
// draw the current frame based on sliderValue
function draw(sliderValue,direction) {
var getPos = false; // true if need pos on current curve
var getForwardPos = false; // true if need pos on current curve
var percent,percent1; // get the percentage on curves
var birdPos; // get bird pos
var birdLookAtPos; // get bird look at pos
ctx.lineWidth = 5;
for(var i = 0; i < paths.length; i ++){
var path = paths[i]; // get a path from array
var p = path.points;
ctx.strokeStyle = path.col;
ctx.beginPath();
ctx.moveTo(p[0].x,p[0].y);
if(sliderValue >= i * 50 && sliderValue < (i+1) * 50){
getPos = true;
percent = (sliderValue % 50) / 50;
}
if(sliderValue + direction >= i * 50 && sliderValue + direction < (i+1) * 50){
getForwardPos = true;
percent1 = ((sliderValue + direction) % 50) / 50;
}
if(p.length > 3){
ctx.bezierCurveTo(p[1].x,p[1].y,p[2].x,p[2].y,p[3].x,p[3].y);
if(getPos){
birdPos = getCubicBezierXYatPercent(p[0],p[1],p[2],p[3],percent);
getPos = false;
}
if(getForwardPos){
birdLookAtPos = getCubicBezierXYatPercent(p[0],p[1],p[2],p[3],percent1);
getForwardPos = false;
}
}else{
ctx.quadraticCurveTo(p[1].x,p[1].y,p[2].x,p[2].y);
if(getPos){
birdPos = getQuadraticBezierXYatPercent(p[0],p[1],p[2],percent);
getPos = false;
}
if(getForwardPos){
birdLookAtPos = getQuadraticBezierXYatPercent(p[0],p[1],p[2],percent1);
getForwardPos = false;
}
}
ctx.stroke();
}
drawImageLookingAt(birdImage,birdPos,birdLookAtPos);
}
function drawImageLookingAt(image, point, lookat ) {
if(lookat === undefined){ // if no lookat then exit or it will crash.
return;
}
var xAx,xAy; // vector for x Axis of image
var x,y;
x = lookat.x - point.x;
y = lookat.y - point.y;
var dist = Math.max(0.01,Math.sqrt(x * x + y * y)); // Math.max to avoid zero which will create NaN
xAx = x / dist; // get x component of x Axis
xAy = y / dist; // get y component of x Axis
// y axis is at 90 deg so dont need y axis vector
ctx.setTransform( // position the image using transform
xAx, xAy, // set direction of x Axis
-xAy, xAx, // set direction oy y axis
point.x, point.y
);
// bird is pointing in the wrong direction. Not along x axis
// so rotate the image 90 deg clockwise
ctx.rotate(Math.PI / 2);
ctx.drawImage(image, -image.width / 2, -image.height / 2);
ctx.setTransform(1,0,0,1,0,0); // Restore default Not really needed if you only use setTransform to do transforms
// but in case you use transform, rotate, translate or scale you need to reset the
// transform.
}
// line: percent is 0-1
function getLineXYatPercent(startPt, endPt, percent) {
var dx = endPt.x - startPt.x;
var dy = endPt.y - startPt.y;
var X = startPt.x + dx * percent;
var Y = startPt.y + dy * percent;
return ({
x: X,
y: Y
});
}
// quadratic bezier: percent is 0-1
function getQuadraticBezierXYatPercent(startPt, controlPt, endPt, percent) {
var x = Math.pow(1 - percent, 2) * startPt.x + 2 * (1 - percent) * percent * controlPt.x + Math.pow(percent, 2) * endPt.x;
var y = Math.pow(1 - percent, 2) * startPt.y + 2 * (1 - percent) * percent * controlPt.y + Math.pow(percent, 2) * endPt.y;
return ({
x: x,
y: y
});
}
// cubic bezier percent is 0-1
function getCubicBezierXYatPercent(startPt, controlPt1, controlPt2, endPt, percent) {
var x = CubicN(percent, startPt.x, controlPt1.x, controlPt2.x, endPt.x);
var y = CubicN(percent, startPt.y, controlPt1.y, controlPt2.y, endPt.y);
return ({
x: x,
y: y
});
}
// cubic helper formula at percent distance
function CubicN(pct, a, b, c, d) {
var t2 = pct * pct;
var t3 = t2 * pct;
return a + (-a * 3 + pct * (3 * a - a * pct)) * pct + (3 * b + pct * (-6 * b + b * 3 * pct)) * pct + (c * 3 - c * 3 * pct) * t2 + d * t3;
}
<canvas height="1961" width="1000" id="canvas"></canvas>

Haversine Formula still not working

I used harversine formula to calculate if points are inside/outside of circle, but still it response that points are inside of the circle, it must be outside the circle. Take a look at my code.
var xp = 7.070562277980709; // point_lat
var yp = 125.60755640475463; // point_long
var radius = 63.942490126300555; // radius
var xc = 7.070479805752504; // circle_lat
var yc = 125.60851603754577; // circle_lon
var r = radius / 1000; // convert meter to kilometer
var dlat = (xp - xc) * (Math.PI / 180);
var dlng = (yp - yc) * (Math.PI / 180);
var a = ((Math.sin(dlat / 2)) * (Math.sin(dlat / 2)));
var b = ((Math.cos(xp * (Math.PI / 180))) * (Math.cos(xc * (Math.PI / 180))));
var c = ((Math.sin(dlng / 2)) * (Math.sin(dlng / 2)));
var d = a + (b * c);
var e = 2 * Math.atan2(Math.sqrt(d), Math.sqrt(1 - d));
var f = r * e;
if (f < r) {
alert('INSIDE');
} else if(f > r) {
alert('OUTSIDE');
}
this function should alert me "OUTSIDE". Whats wrong with this code?? Thanks for your help.
All points are given by google map. And the default unit of radius of google map is meter, thats why I converted it to kilometer.

In the formula you are using, the radius is the Earth's radius. The formula gives the great circle (i.e. shortest) distance between two points on the Earth's surface.
Using 63.942490126300555 for the radius, then dividing it by 1,000 gives an f of 0.0000010667905687961212 km or 0.001 m or 1 mm.
Substituting a more appropriate value for r (e.g. 6,371) gives an f of 0.10629117978319975 km, or 106.291 metres.
Calculating it another way, since the coordinates are close to the equator, you can work out the distances as fractions of the Earth's circumference and use plain trigonometry.
Using a circumference of 40,000 km, the difference in latitude is 0.0000824722282057877 degrees, which is:
dLat = 40,000 km * 0.0000824722282057877 / 360
or
dLat = 0.009163580911754189 km
= 9.164 m
and for longitude:
dLong = 0.0009596327911367553;
dist = 40000 * 0.0009596327911367553 / 360;
= 0.10662586568186169 km
= 106.626 m
And a bit of basic trig:
dist = sqrt(9.164^2 + 106.626^2)
= 0.10629117978319975 km
= 106.291 m
which is pretty close to the other result. You can use that method quite successfully for small distances, just multiply the distance derived from the difference in longitude by the cosine of the latitude (since angular distances get shorter as you get closer to the pole).
My comment was just a dig at your spelling of "metre". :-)
Edit
Here's a function to return the great circle distance based on the Haversine formula at Movable Type Scripts:
// Return the great circle distance between two points on
// the Earth's surface given their latitude and longitude in
// decimal degrees. Only approximate.
function greatCircleDistance(lat0, lon0, lat1, lon1) {
// Approximate Earth radius
var earthRadius = 6.371e3; // 6,371,000 m
// Convert args to radians
for (var i=arguments.length; i; ) {
arguments[--i] = arguments[i] * Math.PI/180;
}
// Do calculation
var dLat = lat1 - lat0;
var dLon = lon1 - lon0;
var a = Math.pow(Math.sin(dLat/2),2) +
Math.cos(lat0) * Math.cos(lat1) *
Math.pow(Math.sin(dLon/2),2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
return earthRadius * c;
}
var xp = 7.070562277980709; // point_lat
var yp = 125.60755640475463; // point_long
var xc = 7.070479805752504; // circle_lat
var yc = 125.60851603754577; // circle_lon
console.log(greatCircleDistance(xp, yp, xc, yc)); // 0.10629117978188952
So you can do:
if ( greatCircleDistance(xp, yp, xc, yc) > 63) {
console.log('outside');
} else {
console.log('inside');
}

It is obvious that your Harversine calculation is correct and it is equal to the result returned by google map api static method computeDistanceBetween. Here is a fiddle.
However your logic implies that both the radius of sphere and radius within which you want to check if a point exists, are same.
To get the expected output you must model your problem space as below
R : radius of sphere
p1, p2... : points(lat,long co-ordinates) on the surface of sphere
r: to check whether p2 lies within distance 'r' of p1 where r & R in the same unit
Based on above you need to implement below logic
var e = calculate haversine of the central angle for point p1 and p2
var d = e * R;//where R is the radius of sphere, and the d would be great circle distance
if( d < r){// check whether p1 exists within r distance of p2
//point is inside
}
else{
//point is outside
}
Note that Haversine formula is not only for earth distance, rather it is for spherical body. However the correctness may differ based on size and position of the points under consideration.

Get heading and pitch from pixels on Street View

I think this is the best place for this question.
I am trying to get the heading and pitch of any clicked point on an embedded Google Street View.
The only pieces of information I know and can get are:
The field of view (degrees)
The center point's heading and pitch (in degrees) and x and y pixel position
The x and y pixel position of the mouse click
I've included here a screenshot with simplified measurements as an example:
I initally just thought you could divide the field of view by the pixel width to get degrees per pixel, but it's more complicated, I think it has to do with projecting onto the inside of a sphere, where the camera is at the centre of the sphere?
Bonus if you can tell me how to do the reverse too...
Clarification:
The goal is not to move the view to the clicked point, but give information about a clicked point. The degrees per pixel method doesn't work because the viewport is not linear.
THe values I have here are just examples, but the field of view can be bigger or smaller (from [0.something, 180], and the center is not fixed, it could be any value in the range [0, 360] and vertically [-90, 90]. The point [0, 0] is simply the heading (horizontal degrees) and pitch (vertical degrees) of the photogapher when the photo was taken, and doesn't really represent anything.

TL;DR: JavaScript code for a proof of concept included at the end of this answer.
The heading and pitch parameters h0 and p0 of the panorama image corresponds to a direction. By using the focal length f of the camera to scale this direction vector, one can get the 3D coordinates (x0, y0, z0) of the viewport center at (u0, v0):
x0 = f * cos( p0 ) * sin( h0 )
y0 = f * cos( p0 ) * cos( h0 )
z0 = f * sin( p0 )
The goal is now to find the 3D coordinates of the point at to some given pixel coordinates (u, v) in the image. First, map these pixel coordinates to pixel offsets (du, dv) (to the right and to the top) from the viewport center:
du = u - u0 = u - w / 2
dv = v0 - v = h / 2 - v
Then a local orthonormal 2D basis of the viewport in 3D has to be found. The unit vector (ux, uy, uz) supports the x-axis (to the right along the direction of increasing headings) and the vector (vx, vy, vz) supports the y-axis (to the top along the direction of increasing pitches) of the image. Once these two vectors are determined, the 3D coordinates of the point on the viewport matching the (du, dv) pixel offset in the viewport are simply:
x = x0 + du * ux + dv * vx
y = y0 + du * uy + dv * vy
z = z0 + du * uz + dv * vz
And the heading and pitch parameters h and p for this point are then:
R = sqrt( x * x + y * y + z * z )
h = atan2( x, y )
p = asin( z / R )
Finally to get the two unit vectors (ux, uy, uz) and (vx, vy, vz), compute the derivatives of the spherical coordinates by the heading and pitch parameters at (p0, h0), and one should get:
vx = -sin( p0 ) * sin ( h0 )
vy = -sin( p0 ) * cos ( h0 )
vz = cos( p0 )
ux = sgn( cos ( p0 ) ) * cos( h0 )
uy = -sgn( cos ( p0 ) ) * sin( h0 )
uz = 0
where sgn( a ) is +1 if a >= 0 else -1.
Complements:
The focal length is derived from the horizontal field of view and the width of the image:
f = (w / 2) / Math.tan(fov / 2)
The reverse mapping from heading and pitch parameters to pixel coordinates can be done similarly:
Find the 3D coordinates (x, y, z) of the direction of the ray corresponding to the specified heading and pitch parameters,
Find the 3D coordinates (x0, y0, z0) of the direction of the ray corresponding to the viewport center (an associated image plane is located at (x0, y0, z0) with an (x0, y0, z0) normal),
Intersect the ray for the specified heading and pitch parameters with the image plane, this gives the 3D offset from the viewport center,
Project this 3D offset on the local basis, getting the 2D offsets du and dv
Map du and dv to absolute pixel coordinates.
In practice, this approach seems to work similarly well on both square and rectangular viewports.
Proof of concept code (call the onLoad() function on a web page containing a sized canvas element with a "panorama" id)
'use strict';
var viewer;
function onClick(e) {
viewer.click(e);
}
function onLoad() {
var element = document.getElementById("panorama");
viewer = new PanoramaViewer(element);
viewer.update();
}
function PanoramaViewer(element) {
this.element = element;
this.width = element.width;
this.height = element.height;
this.pitch = 0;
this.heading = 0;
element.addEventListener("click", onClick, false);
}
PanoramaViewer.FOV = 90;
PanoramaViewer.prototype.makeUrl = function() {
var fov = PanoramaViewer.FOV;
return "https://maps.googleapis.com/maps/api/streetview?location=40.457375,-80.009353&size=" + this.width + "x" + this.height + "&fov=" + fov + "&heading=" + this.heading + "&pitch=" + this.pitch;
}
PanoramaViewer.prototype.update = function() {
var element = this.element;
element.style.backgroundImage = "url(" + this.makeUrl() + ")";
var width = this.width;
var height = this.height;
var context = element.getContext('2d');
context.strokeStyle = '#FFFF00';
context.beginPath();
context.moveTo(0, height / 2);
context.lineTo(width, height / 2);
context.stroke();
context.beginPath();
context.moveTo(width / 2, 0);
context.lineTo(width / 2, height);
context.stroke();
}
function sgn(x) {
return x >= 0 ? 1 : -1;
}
PanoramaViewer.prototype.unmap = function(heading, pitch) {
var PI = Math.PI
var cos = Math.cos;
var sin = Math.sin;
var tan = Math.tan;
var fov = PanoramaViewer.FOV * PI / 180.0;
var width = this.width;
var height = this.height;
var f = 0.5 * width / tan(0.5 * fov);
var h = heading * PI / 180.0;
var p = pitch * PI / 180.0;
var x = f * cos(p) * sin(h);
var y = f * cos(p) * cos(h);
var z = f * sin(p);
var h0 = this.heading * PI / 180.0;
var p0 = this.pitch * PI / 180.0;
var x0 = f * cos(p0) * sin(h0);
var y0 = f * cos(p0) * cos(h0);
var z0 = f * sin(p0);
//
// Intersect the ray O, v = (x, y, z)
// with the plane at M0 of normal n = (x0, y0, z0)
//
// n . (O + t v - M0) = 0
// t n . v = n . M0 = f^2
//
var t = f * f / (x0 * x + y0 * y + z0 * z);
var ux = sgn(cos(p0)) * cos(h0);
var uy = -sgn(cos(p0)) * sin(h0);
var uz = 0;
var vx = -sin(p0) * sin(h0);
var vy = -sin(p0) * cos(h0);
var vz = cos(p0);
var x1 = t * x;
var y1 = t * y;
var z1 = t * z;
var dx10 = x1 - x0;
var dy10 = y1 - y0;
var dz10 = z1 - z0;
// Project on the local basis (u, v) at M0
var du = ux * dx10 + uy * dy10 + uz * dz10;
var dv = vx * dx10 + vy * dy10 + vz * dz10;
return {
u: du + width / 2,
v: height / 2 - dv,
};
}
PanoramaViewer.prototype.map = function(u, v) {
var PI = Math.PI;
var cos = Math.cos;
var sin = Math.sin;
var tan = Math.tan;
var sqrt = Math.sqrt;
var atan2 = Math.atan2;
var asin = Math.asin;
var fov = PanoramaViewer.FOV * PI / 180.0;
var width = this.width;
var height = this.height;
var h0 = this.heading * PI / 180.0;
var p0 = this.pitch * PI / 180.0;
var f = 0.5 * width / tan(0.5 * fov);
var x0 = f * cos(p0) * sin(h0);
var y0 = f * cos(p0) * cos(h0);
var z0 = f * sin(p0);
var du = u - width / 2;
var dv = height / 2 - v;
var ux = sgn(cos(p0)) * cos(h0);
var uy = -sgn(cos(p0)) * sin(h0);
var uz = 0;
var vx = -sin(p0) * sin(h0);
var vy = -sin(p0) * cos(h0);
var vz = cos(p0);
var x = x0 + du * ux + dv * vx;
var y = y0 + du * uy + dv * vy;
var z = z0 + du * uz + dv * vz;
var R = sqrt(x * x + y * y + z * z);
var h = atan2(x, y);
var p = asin(z / R);
return {
heading: h * 180.0 / PI,
pitch: p * 180.0 / PI
};
}
PanoramaViewer.prototype.click = function(e) {
var rect = e.target.getBoundingClientRect();
var u = e.clientX - rect.left;
var v = e.clientY - rect.top;
var uvCoords = this.unmap(this.heading, this.pitch);
console.log("current viewport center");
console.log(" heading: " + this.heading);
console.log(" pitch: " + this.pitch);
console.log(" u: " + uvCoords.u)
console.log(" v: " + uvCoords.v);
var hpCoords = this.map(u, v);
uvCoords = this.unmap(hpCoords.heading, hpCoords.pitch);
console.log("click at (" + u + "," + v + ")");
console.log(" heading: " + hpCoords.heading);
console.log(" pitch: " + hpCoords.pitch);
console.log(" u: " + uvCoords.u);
console.log(" v: " + uvCoords.v);
this.heading = hpCoords.heading;
this.pitch = hpCoords.pitch;
this.update();
}

This answer is unprecise, have a look at most recent answer of user3146587.
I'm not very good at mathematical explanations. I've coded an example and tried to explain the steps in the code. As soon as you click on one point in the image, this point becomes the new center of the image. Even though you have explicitly not demanded for this, this is perfect for illustrating the effect. The new image is drawn with the previously calculated angle.
Example: JSFiddle
The important part is, that I use the radian to calculate radius of the "sphere of view". The radian in this case is the width of the image (in your example 100)
radius = radian / FOV
With the radian, radius and the relative position of the mouse position I can calculate the degree that changes from the center to the mouse position.
Center(50,50)
MousePosition(75/25)
RelativeMousePosition(25,-25)
When the relative mouse position is 25 the radian used for the calculation of the horizontal angle is 50.
radius = 50 / FOV // we've calculated the radius before, it stays the same
See this image for the further process:
I can calculate the new heading and pitch when I add/subtract the calculated angle to the actual angle (depending on left/right, above/under). See the linked JSFiddle for the correct behavior of this.
Doing the reverse is simple, just do the listed steps in the opposite direction (the radius stays the same).
As I've already mentioned, I'm not very good at mathematical explanations, but don't hesitate to ask questions in the comments.

Here is an attempt to give a mathematical derivation of the answer to your question.
Note: Unfortunately, this derivation only works in 1D and the conversion from a pair of angular deviations to heading and pitch is wrong.
Notations:
f: focal length of the camera
h: height in pixels of the viewport
w: width in pixels of the viewport
dy: vertical deviation in pixels from the center of the viewport
dx: horizontal deviation in pixels from the center of the viewport
fov_y: vertical field of view
fov_x: horizontal field of view
dtheta_y: relative vertical angle from the center of the viewport
dtheta_x: relative horizontal angle from the center of the viewport
Given dy, the vertical offset of the pixel from the center of the viewport (this pixel corresponds to the green ray on the figure), we are trying to find dtheta_y (the red angle), the relative vertical angle from the center of the viewport (the pitch of the center of the viewport is known to be theta_y0).
From the figure, we have:
tan( fov_y / 2 ) = ( h / 2 ) / f
tan( dtheta_y ) = dy / f
so:
tan( dtheta_y ) = dy / ( ( h / 2 ) / tan( fov_y / 2 ) )
= 2 * dy * tan( fov_y / 2 ) / h
and finally:
dtheta_y = atan( 2 * dy * tan( fov_y / 2 ) / h )
This is the relative pitch angle for the pixel at dy from the center of the viewport, simply add to it the pitch angle at the center of the viewport to get the absolute pitch angle (i.e. theta_y = theta_y0 + dtheta_y).
similarly:
dtheta_x = atan( 2 * dx * tan( fov_x / 2 ) / w )
This is the relative heading angle for the pixel at dx from the center of the viewport.
Complements:
Both relations can be inverted to get the mapping from relative heading / pitch angle to relative pixel coordinates, for instance:
dy = h tan( dtheta_y ) / ( 2 * tan( fov_y / 2 ) )
The vertical and horizontal fields of view fov_y and fov_x are linked by the relation:
w / h = tan( fov_x / 2 ) / tan( fov_y / 2 )
so:
fov_x = 2 * atan( w * tan( fov_y / 2 ) / h )
The vertical and horizontal deviations from the viewport center dy and dx can be mapped to absolute pixel coordinates:
x = w / 2 + dx
y = h / 2 - dy
Proof of concept fiddle

Martin Matysiak wrote a JS library that implements the inverse of this (placing a marker at a specific heading/pitch). I mention this as the various jsfiddle links in other answers are 404ing, the original requestor added a comment requesting this, and this SO page comes up near the top for related searches.
The blog post discussing it is at https://martinmatysiak.de/blog/view/panomarker.
The library itself is at https://github.com/marmat/google-maps-api-addons.
There's documentation and demos at http://marmat.github.io/google-maps-api-addons/ (look at http://marmat.github.io/google-maps-api-addons/panomarker/examples/basic.html and http://marmat.github.io/google-maps-api-addons/panomarker/examples/fancy.html for the PanoMarker examples).