​

function setup() {

  createCanvas(512, 512,WEBGL);

  angleMode(RADIANS);

}

​

const latlon2pos = (r,lat,lon)=>{

  /* 

    lat : degree between [-90, 90]

    lon : degree between [-180, 180]

  */

  lat = radians(lat) + PI/2

  lon = radians(lon) + PI

  return createVector(

    r * sin(lat) * cos(lon),

    r * cos(lat),

    -1 * r * sin(lat) * sin(lon)

  )

}

​

const drawDot = (r,lat,lon)=>{

  /* 

    lat : degree between [-90, 90]

    lon : degree between [-180, 180]

  */

  push()

  fill(255,0,0)

  translate(latlon2pos(r, lat, lon))

  sphere(balls_radius)

  pop()

}

​

​

function draw() {

  //Initialization

  background(34, 47, 62);

  fill(46, 134, 222)

  // noStroke()

  lights()

  // Rotating the camera

  // rotateY(millis() / 500);

  // Drawing the Earth

  const detail = 24

  const radius = 200

  sphere(radius,detail,detail)

  // Place cubes on the spheres surface

  // tehran 35.6892° N, 51.3890° E 

  let tehran_lat = 35.6892

  let tehran_lon = 51.3890

  // draw a cube at bnd 27.1832° N, 56.2666° E

  let bnd_lat = 27.1832

  let bnd_lon = 56.2666

  drawDot(radius,27,56)

  drawDot(radius,35,51)

}