6

I'm wondering if the texture to my sphere is somehow not being applied correctly, and if I can offset it somehow? I am trying to place a box at Sydney, Australia by supplying the lat/lon and converting to cartesian xyz coordinates. However, the box is not places in the correct location. My guess is since the original image is a Mercator map, when it's being applied to the sphere the lat/lon center point is not correct.

The code below is a minimal re-produceable example.

  1. I am loading an earth image and applying it to the sphere (radius = 400).
  2. I am then supplying the latitude/longitude for Sydney, Australia (33.8688, -151.2093) and converting to radians.
  3. Converting lat/lon to cartesian xyz (taken from: https://stackoverflow.com/a/1185413/3723165)
  4. Translating and pushing a box to that location.

Here's where that box is placed: Output

Re-produceable code

var img;
var theta = 0;
var r = 400;
    
function preload() {
  img = loadImage('https://eoimages.gsfc.nasa.gov/images/imagerecords/79000/79765/dnb_land_ocean_ice.2012.3600x1800.jpg');
}
    
function setup() {
  createCanvas(1600, 1200, WEBGL);
}

function draw() {
  background(0);

  rotateY(theta);
  theta += 0.01;

  texture(img);
  sphere(r);

  //Sydney, Australia Latitude/Longtidue
  var lat = radians(33.8688);
  var lon = radians(151.2093);

  //cartesian coordinates
  var x = r * Math.cos(lat) * Math.cos(lon);
  var y = r * Math.cos(lat) * Math.sin(lon);
  var z = r * Math.sin(lat);

  push();
  translate(x, y, z);
  fill(255);
  box(100, 10, 10);
  pop();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>
JeremyDouglass
  • 1,361
  • 2
  • 18
  • 31
Blake S.
  • 401
  • 1
  • 4
  • 10
  • 1
    Ok, I figured partially what's wrong. If I plot latitude 0, longitude 0 it shows between India and Thailand, which is incorrect. Latitude 0, longitude 0 should plot just of the west coast of Africa. How can I correct this? I think it's a p5.js error when applying a texture to the sphere. Because if I use the exact same code in Processing, it plots correctly off the coast of Africa. – Blake S. Aug 08 '17 at 17:35

1 Answers1

4

There are a number of issues here:

1) Your coordinates for Sydney are incorrect, the latitude is negative (-33.8688, 151.2093).

2) The vertical (polar) axis corresponds to Y coordinates, not Z coordinates (confusing, I know). So I swapped the Y and Z calculations.

3) There are some offsets needed to get accurate placement. Since you aren't providing texture mapping, all of the texture placement is done behind the scenes, and on a sphere, where to start a texture is pretty ambiguous. Through trial and error, I determined it's just 180 degrees off on longitude.

var img;
var theta = 0;
var r = 400;


function preload() {
  img = loadImage('https://eoimages.gsfc.nasa.gov/images/imagerecords/79000/79765/dnb_land_ocean_ice.2012.3600x1800.jpg');
}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
}

function draw() {
  background(0);

  camera(0, 0, 200)
  rotateY(theta);
  theta += 0.01;

  texture(img);
  sphere(r);

  //Sydney, Australia Latitude/Longtidue
  var lat = radians(-33.8688);
  var lon = radians(151.2093);

  //cartesian coordinates
  // var x = r * Math.cos(lat) * Math.cos(lon);
  // var y = r * Math.cos(lat) * Math.sin(lon);
  // var z = r * Math.sin(lat);
  var x = r * Math.cos(lat) * Math.sin(lon+radians(180));
  var y = r * Math.sin(-lat);
  var z = r * Math.cos(lat) * Math.cos(lon+radians(180));

  push();
  translate(x, y, z);
  fill(255);
  box(100, 10, 10);
  pop();
}

Here's a working example: https://www.openprocessing.org/sketch/443758

boxtrain
  • 2,458
  • 1
  • 11
  • 20
  • Perfect. Thank you! I know I was missing the negative. My original code was plotting closer to Sydney when it was not negative. Thank you again. – Blake S. Aug 12 '17 at 18:08