let arrowAngle = 0;

let initialArrowAngle = 0; //  initialArrowAngle

let targetLatitude = 51.4793; // the latitude of the target destination

//RCA Battersea coordinates as an example

let targetLongitude = -0.1731; // the longitude of the target destination

let userLatitude = 0; //default value

let userLongitude = 0; 

let smoothingFactor = 2;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  if (navigator.geolocation) {

    navigator.geolocation.watchPosition(updateUserLocation);

  } else {

    console.log('Geolocation is not supported by this browser.');

  }

​

  if (window.DeviceOrientationEvent) {

    window.addEventListener('deviceorientation', handleOrientation);

  } else {

    console.log('Device orientation not supported');

  }

  angleMode(DEGREES);

}

​

function draw() {

  background(255);

​

  push();

  translate(width / 2, height / 2);

​

  // Use the calculated arrowRotation to set the rotation

  rotate(radians(arrowRotation));

​

  // Draw the arrow body (rectangle)

  rectMode(CENTER);

  fill(252,211,55); // bright yellow

  noStroke();

  let size = 100;

  rect(0, 0, 20, size);

​

  // Draw the arrowhead (triangle)

  triangle(-25, -size / 2, 25, -size / 2, 0, -size);

​

  pop();

  print("arrowRotation", arrowRotation);

}

​

function updateUserLocation(position) {

  userLatitude = position.coords.latitude;

  userLongitude = position.coords.longitude;

​

  // Calculate the angle between user location and target destination

  arrowRotation = calculateCompassAngle(userLatitude, userLongitude, targetLatitude, targetLongitude);

 // print("arrowRotation", arrowRotation);

}

​

function handleOrientation(event) {

  if (event.alpha !== null && event.beta !== null && event.gamma !== null) {

    arrowAngle= event.webkitCompassHeading;

    print("arrowAngle", arrowAngle);

     // Calculate the relative orientation based on the initial orientation

    arrowAngle = event.webkitCompassHeading - initialArrowAngle;

    // Apply exponential smoothing to arrowRotation

    arrowRotation = smoothingFactor * arrowAngle + (1 - smoothingFactor) * arrowRotation;

​

    // Map arrowAngle to a new range (e.g., from 0 to 360) for arrowRotation

    arrowRotation = map(arrowAngle, 0, 360, 0, 360);

​

    // Adjust arrowRotation based on specific conditions

    if (arrowAngle <= 245 && arrowAngle >= 190) { //arrowAngle <= 250 && arrowAngle >= 170

      arrowRotation-= 235; // arrowRotation(90);235

    } else if (arrowAngle <= 190 && arrowAngle >= 124) {//arrowAngle <= 170 && arrowAngle >= 80

      arrowRotation -= 235; // arrowRotation(90);

    } else if (arrowAngle <= 124 && arrowAngle >= 15) { //arrowAngle <= 80 && arrowAngle >= 1

      arrowRotation -= 270; // arrowRotation(270);

    } else if (arrowAngle <= 360 && arrowAngle >= 230){//arrowAngle <= 360 && arrowAngle >= 250

      arrowRotation -= 270;  // arrowRotation(270);       

   } else {

      arrowRotation -= 270; // arrowRotation(270);

   }

  }

}

​

function calculateCompassAngle(lat1, lon1, lat2, lon2) {

  // Convert latitude and longitude from degrees to radians

  lat1 = radians(lat1);

  lon1 = radians(lon1);

  lat2 = radians(lat2);

  lon2 = radians(lon2);

​

  // Calculate the differences in latitude and longitude

  let dLat = lat2 - lat1;

  let dLon = lon2 - lon1;

​

  // Calculate the angle using atan2

  let angle = atan2(dLon, dLat);

​

  // Convert the angle to degrees

  angle = degrees(angle);

​

  // Normalize the angle to be between 0 and 360 degrees

  angle = (angle + 360) % 360;

​

  return angle;

}

​