In my latest project, I have created a stunning panorama featuring a compass placed right in the middle. The compass is initially pointing towards the top center of the image.
Now, I am faced with the challenge of moving the compass as the viewer navigates through the 360 panorama. This movement creates an adjacent duplicate image, and what I aim to achieve is for the compass to always point towards the closest point on either side as the viewer moves from left to right or vice versa.
Although I have made some progress, the behavior of the compass doesn't align with my vision.
Here is the code snippet that I have been working on: https://gist.github.com/joeyhipolito/8678bf35dba7795de4d5
The approach I took was to define two points:
points.push({
x: target.offset().left + (windowWidth) / 2,
y: target.offset().top
});
points.push({
x: (target.offset().left + (windowWidth) / 2) + (common.width / 2),
y: target.offset().top
});
My next step was to calculate which point is closer to the reference using the Pythagorean theorem.
var closestPoint = points[0];
var closestValue = Math.sqrt(Math.pow(points[0].x, 2) + Math.pow(points[0].y, 2));
for (var i = 1; i >= points.length; i++) {
var z = Math.sqrt(Math.pow(points[i].x, 2) + Math.pow(points[i].y, 2));
if(z < closestValue) {
closestPoint = points[i];
closestValue = z;
}
};
I would appreciate your insights on what might be missing in my implementation.