let globeRadius = 200;

let longitude = 0;

let latitude = 0;

​

function setup() {

  createCanvas(600, 400, WEBGL);

  globe = loadImage('https://upload.wikimedia.org/wikipedia/commons/7/76/The_World_map.png'); // Updated Earth texture

}

​

function draw() {

  background(255); // White background

​

  lights();

  rotateY(frameCount * 0.01);  // Rotate the earth slowly

​

  // Draw the globe with the new texture

  texture(globe);

  sphere(globeRadius);

​

  // Map mouse position to the 3D sphere surface

  let mouseVec = createVector(mouseX - width / 2, mouseY - height / 2, 0);

  let angleX = map(mouseVec.x, -width / 2, width / 2, -PI, PI);

  let angleY = map(mouseVec.y, -height / 2, height / 2, HALF_PI, -HALF_PI);

​

  // Calculate longitude and latitude based on the mouse hover position

  longitude = degrees(angleX);

  latitude = degrees(angleY);

​

  // If the mouse is near the globe, draw the latitude and longitude circles and show coordinates

  if (mouseVec.mag() < globeRadius * 1.5) {

    drawLatLongCircles();

    showCoordinates();

  }

}

​

function drawLatLongCircles() {

  noFill();

​

  // Longitude circle (vertical) - Red

  stroke(255, 0, 0);

  push();

  rotateY(radians(longitude));

  ellipse(0, 0, globeRadius * 2, globeRadius * 2);

  pop();

​

  // Latitude circle (horizontal) - Blue

  stroke(0, 0, 255);

  push();

  rotateX(radians(-latitude));

  ellipse(0, 0, globeRadius * 2, globeRadius * 2);

  pop();

}

​

function showCoordinates() {

  // Display the coordinates as a small label near the mouse

  let labelX = mouseX - width / 2 + 20;

  let labelY = mouseY - height / 2 - 10;

​

  push();

  resetMatrix();

  translate(labelX, labelY, 0);

  fill(0); // Black text for visibility on white background

  textSize(12);

  textAlign(LEFT, TOP);

  text("Lat: " + nf(latitude, 1, 2) + "°\nLon: " + nf(longitude, 1, 2) + "°", 0, 0);

  pop();

}

​