Adding points to spinning sphere (earth)

blakes

Trying to understand why I'm not seeing boxes drawn at my lat/lon points. It was taken from a Processing example, and I rewrote using p5.js (I'm a beginner at it).

To get this to work, I had to modify the p5.js codebase, otherwise I would get 'Error: Cannot read property 'transpose3x3' of null'. The modification is shown in this post: https://github.com/processing/p5.js/issues/1770

    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");
      emails = loadTable("http://" + "earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv");
    }

    function setup() {
      createCanvas(1600, 1200, WEBGL);
      //latlong = []
    }

    function draw() {
      background(0);

      //push();
      rotateX(.25);
      rotateY(theta);

      ellipsoid(r, r, r);
      texture(img);

      //get table data
      //ONLY LOOPING TO i = 1000 FOR THIS EXAMPLE
      for (i = 0; i <= 1000; i++) {
        latlong = createVector(emails.getRow(i).get("latitude"), emails.getRow(i).get("longitude"));
        emailcount = emails.getRow(i).get("mag");

        //convert lat/long to radians
        var lat = radians(latlong.x)
        var lon = radians(latlong.y)

        //offset altitude by 1/2 emailcount
        var alt = (r + emailcount) / 2;

        //cartesian coordinates
        var cx = alt * Math.cos(lat) * Math.cos(lon);
        var cy = alt * Math.cos(lat) * Math.sin(lon);
        var cz = alt * Math.sin(lat);

        //Fix computer graphics axis not inline with typical cartesian system => gx = cx, gy = -cz, gz = -cy
        // plus on Nasa texture, [0°, 0°] at center instead of middle-left <=> rotated 180° around gy => x = -gx, y = gy, z = -gz
        x = -cx;
        y = -cz;
        z = cy;

        //box rotation angle and axis
        dir = createVector(x, y, z);
        x_static = createVector(1, 0, 0);
        xAngle = angleBetween(x_static, dir);
        rotAxis = x_static.cross(dir);

        //apply transformations
        //draw box
        push();
        translate(x, y, z);
        rotate(xAngle, rotAxis.x, rotAxis.y, rotAxis.z);

        // stroke(255, 0, 255);
        fill(255);
        box(alt, 10, 10);
        pop();
      }

      theta += 0.01;
    }

    function angleBetween(v1, v2) {
      if (v1.x == 0 && v1.y == 0 && v1.z == 0) return 0.0;
      if (v2.x == 0 && v1.y == 0 && v1.z == 0) return 0.0;

      var dot = v1.x * v2.x + v1.y * v2.y + v1.z * v2.z;
      var v1mag = Math.sqrt(v1.x * v1.x + v1.y * v1.y + v1.z * v1.z);
      var v2mag = Math.sqrt(v2.x * v2.x + v2.y * v2.y + v2.z * v2.z);

      var amt = dot / (v1mag * v2mag);

      if (amt <= -1) {
        return PConstants.PI;
      } else if (amt >= 1) {
        return 0;
      }
      return Math.acos(amt);
  }

blakes

hmmm... For some reason it did not wrap all the code. I tried editing it, but it still won't wrap all code. Sorry. :(

Chrisir

go back edit your post

2 empty lines before and after the code

select / highlight entire code with mouse

hit ctrl-o OR press the C in the little command bar

kfrajer

Try var emails in the global scope and see if this solves the first issue.

Kf

kfrajer

Ok, here is the new version.

http://p5js.sketchpad.cc/KJcZeb4VVA

Notice, you need to cast String to float. You need to use texture before drawing your ellipsoid. This you can see in the documentation: https://p5js.org/reference/#/p5/texture

And emails needs global access, as I mention in the prev post.

Kf

var img;
var theta = 0;
var r = 100;

var emails;

function preload() {
  img = loadImage("https://" + "eoimages.gsfc.nasa.gov/images/imagerecords/79000/79765/dnb_land_ocean_ice.2012.3600x1800.jpg");
  emails = loadTable("https://" + "earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv","csv","header");
}

function setup() {
  createCanvas(600, 600, WEBGL);
  //latlong = []
}

function draw() {
  background(0);

  //push();
  rotateX(.25);
  rotateY(theta);

 texture(img);
  ellipsoid(r, r, r);


  //get table data
  //ONLY LOOPING TO i = 1000 FOR THIS EXAMPLE
  for (i = 0; i <= 1000; i++) {
    latlong = createVector(float(emails.getRow(i).get("latitude")),float(emails.getRow(i).get("longitude")));
    emailcount = emails.getRow(i).get("mag");

    //convert lat/long to radians
    var lat = radians(latlong.x)
    var lon = radians(latlong.y)

    //offset altitude by 1/2 emailcount
    var alt = (r + emailcount) / 1;
    alt=r;
    push();

    rotateY(lon);
    rotateX(lat);
    translate(0,0,r);
    //console.log(latlong.toString());
    //console.log("ok ");


    // stroke(255, 0, 255);
    fill(255,250,25);
    box(10, 10, 10);
    pop();
  }

  theta += 0.01;
}

function angleBetween(v1, v2) {
  if (v1.x == 0 && v1.y == 0 && v1.z == 0) return 0.0;
  if (v2.x == 0 && v1.y == 0 && v1.z == 0) return 0.0;

  var dot = v1.x * v2.x + v1.y * v2.y + v1.z * v2.z;
  var v1mag = Math.sqrt(v1.x * v1.x + v1.y * v1.y + v1.z * v1.z);
  var v2mag = Math.sqrt(v2.x * v2.x + v2.y * v2.y + v2.z * v2.z);

  var amt = dot / (v1mag * v2mag);

  if (amt <= -1) {
    return PConstants.PI;
  } else if (amt >= 1) {
    return 0;
  }
  return Math.acos(amt);
}