​

let c;

let n;

var c1, c2;

​

​

//字体 font

function preload(){

font = loadFont('Sicretmonopersonalextlt-8MZjM.ttf')

}

​

function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES);

  c = color(249, 177, 146);

  n = color(51,94,128);

  value = color(n);

// Define colors

  c1 = color(249,177,146);

  c2 = color(108,92,124);

}

​

function draw() {

  setGradient(c2,c1)

  translate(width/2,height/2);

​

//字体 font

​

//TEXT FONT & TEXT

  fill(255);

  noStroke();

  textFont(font);

  textStyle(BOLD);

  textSize(12);

  text('ZIWEI JI',-180,190);  

//Coordinate

//  strokeWeight(0)

//  text("X: "+mouseX, 0, 50);

//  text("Y: "+mouseY, 0, 30);  

​

//CANVAS SETTING 画板设置    

  rotate(-90);

  noStroke();

​

//set hours 设置时间V

  let h = hour();

  let m = minute();

  let s = second();

  newHourUTC = h+5;

  newMinute = minute()

  if ((minute().toString().length) < 2) {

    newMinute = 0 + minute().toString()} 

 //not working? 00:00 instead of 00:0

​

// ellispe for different countries

  strokeWeight(1.5);

  stroke(0)

  noFill();

  let end1 = map(s, 0 , 60, 0, 360);//second

  let end2 = map(m,0,60,0,360);//minuts

  let end3 = map(h,0,12,0,360);//hours

 //second and minutes 

  push();

  stroke(255);

  rotate(end1)//minuts

  strokeWeight(10)

  line(165,0,165.5,0)

  pop();

​

//USA TIME: 美国时间 

  stroke(255)

  ellipse(0,0,130,130);

​

  push();

  stroke(c)

  rotate(end3)//hour

  strokeWeight(25)

  line(65,0,64,0)

  pop();

​

//日本时间：Japan Time

  japanTime = newHourUTC + 9;

  let endjapan = map(japanTime,0,12,0,360);

  ellipse(0,0,200,200);

​

  push();

  stroke(200,100,100)

  rotate(endjapan)//hour

  strokeWeight(25)

  line(100,0,101,0)

  pop();

//意大利时间 italy time

  italyTime = newHourUTC + 1;

  let enditaly = map(italyTime,0,12,0,360);

  ellipse(0,0,270,270);

​

  push();

  stroke(147,78,71)

  rotate(enditaly)//hour

  strokeWeight(25)

  line(135,0,134,0)

  pop();

  distance =dist(mouseX, mouseY,200,200)

​

//HOVER EFFECT:时间字体

  push();

  rotate(90);

//ITALY  意大利

  if (italyTime > 12) {

    italyTime = italyTime - 12;}

 if((distance<140) && (distance>130)){

   strokeWeight(0);

   fill(255)

   textSize(25);

   text("Italy " + italyTime + ":" + m, -60,-160);

 }else{

   strokeWeight(0);  } 

//JAPAN  日本  

   if (japanTime > 12) {

    japanTime = japanTime - 12;}

   if((distance<115)&&(distance>97)){

   strokeWeight(0)

   textSize(25);

   fill(255)

   text("Japan " + japanTime + ":" + m, -60,-160);

 }else{

   strokeWeight(0); }

//US  美国

   if((distance<70)&&(distance>60)){

   strokeWeight(0);

   textSize(25);

   fill(255);

   text("US " + h + ":" + m, -43,-160);

 }else{

   strokeWeight(0);}

  pop();

}

​

// background 渐变色

function setGradient(c1, c2) {

  // noprotect

  noFill();

  for (var y = 0; y < height; y++) {

    var inter = map(y, 0, height, 0, 1);

    var c = lerpColor(c1, c2, inter);

    stroke(c);

    line(0, y, width, y);

  }

}