let currentLoc;

let myGeo;

let myTime;

let myLati;

let myLongi;

​

let geoBJ;

let timeBJ;

let latiBJ;

let longiBJ;

​

let myH;

let myM;

let myS;

let myDay = 0;

let myMonth = 0;

let myTimezone = 0;

let hrs;

​

let bjH;

let bjM;

let bjS;

let timezoneBJ;

​

let mono;

let month;

let movement = 0;

let movement2 = 0;

​

function preload() {

  // myGeo = loadJSON("https://freegeoip.app/json/", getMyGeo);

  // geoBJ = loadJSON("https://freegeoip.app/json/120.244.176.176", getBJGeo)

 // myGeo = loadJSON("https://freegeoip.app/json/", getMyGeo);

  // geoBJ = loadJSON("https://freegeoip.app/json/120.244.176.176", getBJGeo)

  fetch('https://ipapi.co/json/')

  .then(function(response) {

    response.json().then(jsonData => getMyGeo(jsonData));

    })

  .catch(function(error) {

    console.log(error)

  });

  fetch('https://ipapi.co/120.244.176.176/json/')

  .then(function(response) {

    response.json().then(jsonData => getBJGeo(jsonData));

    })

  .catch(function(error) {

    console.log(error)

  });

​

  fetch('https://worldtimeapi.org/api/ip')

    .then(response => response.json())

    .then((commits) => getMyTime(commits));

​

  fetch('https://worldtimeapi.org/api/timezone/Asia/Shanghai')

    .then(response => response.json())

    .then((commits) => getBJTime(commits));

​

  // response.json()

​

  // myTime = loadJSON("https://worldtimeapi.org/api/ip/", getMyTime);

  // timeBJ = loadJSON("https://worldtimeapi.org/api/timezone/Asia/Shanghai/", getBJTime);

​

  mono = loadFont('UbuntuMono-Regular.ttf');

}

​

function getMyGeo(myGeo) {

  myLati = myGeo.latitude;

  myLongi = myGeo.longitude;

  currentLoc = myGeo.region;

  current = currentLoc.toUpperCase();

  console.log("Debugging: latitude is: " + myLati)

  Console.log("Debugging: current location is: " + current)

  console.log("Debugging: longitude is: " + myLongi)

}

​

function getBJGeo(BJGeo) {

  latiBJ = BJGeo.latitude;

  longiBJ = BJGeo.longitude;

  console.log("Debugging: Beijing's latitude is: " + latiBJ)

  console.log("Debugging: Beijing's longitude is: " + longiBJ)

}

​

​

function getMyTime(myTime) {

  var date = new Date(myTime.unixtime * 1000);

  myTimezone = myTime.abbreviation;

}

​

function getBJTime(timeBJ) {

  //   console.log(timeBJ);

  //     var date2 = new Date(timeBJ.unixtime * 1000);

  //     hoursBJ = date2.getHours();

  //     minBJ = date2.getMinutes();

  //     secBJ = date2.getSeconds();

  timezoneBJ = timeBJ.abbreviation;

}

​

function setup() {

  createCanvas(600, 600);

}

​

function draw() {

  background(163, 64, 28);

  translate(width / 2, height / 2);

  let ts = 12;

​

  var date2 = new Date();

  var utc_offset = date2.getTimezoneOffset();

  date2.setMinutes(date2.getMinutes() + utc_offset);

  var bj_offset = 8 * 60;

  date2.setMinutes(date2.getMinutes() + bj_offset);

  var bjH = date2.getHours();

  var bjM = date2.getMinutes();

  var bjS = date2.getSeconds();

  // console.log(date2);

  // console.log(bjH);

  // console.log(utc_offset);

  if (bjH < 10) {

    bjH = '0' + bjH;

  }

  if (bjM < 10) {

    bjM = '0' + bjM;

  }

  if (bjS < 10) {

    bjS = '0' + bjS;

  }

​

  let myH = hour();

  let myM = minute();

  let myS = second();

  if (myH < 10) {

    myH = '0' + myH;

  }

  if (myM < 10) {

    myM = '0' + myM;

  }

  if (myS < 10) {

    myS = '0' + myS;

  }

​

  push();

  let myCoordArray = ['latitude', myLati, ' longitude', myLongi];

  let separator = ' ';

  let myCoord = join(myCoordArray, separator);

  let myTimeArray = [myTimezone, myH, myM, myS];

  let myTime = join(myTimeArray, separator);

  textAlign(LEFT);

  textFont(mono);

  textSize(ts);

  text(current, -260, -245);

  text(myCoord, -260, -225);

  text(myTime, -260, -205);

  pop();

​

  push();

  let arrayBJ = ['latitude', latiBJ, ' longitude', longiBJ];

  let BJlocation = join(arrayBJ, separator);

  let timeBJArray = [timezoneBJ, bjH, bjM, bjS];

  let timeBJ = join(timeBJArray, separator);

  fill(250);

  textAlign(RIGHT);

  textFont(mono);

  textSize(ts);

  text("BEIJING", 260, 205);

  text(BJlocation, 260, 225);

  text(timeBJ, 260, 245);

  pop();

​

  clockBJ();

  myClock();

}

​

function myClock() {

  push();

  angleMode(RADIANS);

  noFill();

  stroke(0);

  beginShape();

​

  for (let a = 0; a < TWO_PI; a += TWO_PI / 3600) {

    let theta = a + movement;

    let noiseScalar = 0.5;

    let xoff = noiseScalar * cos(theta);

    let yoff = noiseScalar * sin(theta);

    let noiseOffset = 50;

    let noiseSpeed = 12;

    let nValue = noise(xoff + noiseOffset, yoff + noiseOffset, movement * noiseSpeed);

    nValue = nValue * nValue * nValue;

​

    let minimumR = 100;

    let maximumR = 500;

    let blobR = map(nValue, 0, 1, minimumR, maximumR);

​

    let bufferTime = 10;

    let seconds = millis() / 10000;

​

    let mix = min(seconds / 8, 3);

    let r = lerp(blobR, minimumR, mix);

​

    let x = r * cos(a);

    let y = r * sin(a);

​

    vertex(x, y);

  }

  endShape(CLOSE);

  movement -= 0.002;

  pop();

​

  let myH = hour();

​

  push();

  angleMode(DEGREES);

  let hrs = map(myH, 0, 24, 0, 720);

  rotate(hrs);

  line(0, 0, 0, -90);

  pop();

​

  push();

  noFill();

  stroke(0);

  // strokeWeight(3/4);

  rectMode(CENTER);

  rect(-1, -1, 6);

  pop();

}

​

function clockBJ() {

  push();

  angleMode(RADIANS);

  noFill();

  stroke(255);

  beginShape();

​

  for (let a = 0; a < TWO_PI; a += TWO_PI / 3600) {

    let theta = a + movement2;

    let noiseScalar = 0.7;

    let xoff2 = noiseScalar * cos(theta);

    let yoff2 = noiseScalar * sin(theta);

    let noiseOffset2 = 55;

    let noiseSpeed2 = 10;

    let nValue2 = noise(xoff2 + noiseOffset2, yoff2 + noiseOffset2, movement2 * noiseSpeed2);

    nValue2 = nValue2 * nValue2 * nValue2;

​

    let minimumR = 100;

    let maximumR = 500;

    let blobR = map(nValue2, 0, 1, minimumR, maximumR);

​

    let bufferTime = 5;

    let seconds = millis() / 10000;

​

    let mix = min(seconds / 8, 3);

    let r = lerp(blobR, minimumR, mix);

​

    let x2 = r * cos(a);

    let y2 = r * sin(a);

​

    vertex(x2, y2);

  }

  endShape(CLOSE);

  movement2 += 0.001;

  pop();

​

  let myH = hour();

  push();

  angleMode(DEGREES);

  stroke(255);

  let hrs2 = map(myH +1, 0, 24, 0, 720);

  rotate(hrs2);

  strokeWeight(3 / 4);

  line(0, 0, 0, -90);

  pop();

​

  push();

  noFill();

  stroke(255);

  ellipse(1, 1, 6);

  pop();

}