body {
  background-color: FloralWhite;
  display: flex;
  flex-direction: column; 
  justify-content: center;
  align-items: center;
  height: 100vh;
}

canvas {
	border:1px solid #ccc"
}

let earthX;
let earthY;
let draggingOrbit = false;
let draggingEarth = false;
let radius;
let now = new Date();
let orbitColor = 200;
let orbitThickness = 2;
let canvasWidth = window.innerWidth / 2;
let canvasHeight = window.innerHeight;

let prevAngle;

function setup() {
  createCanvas(canvasWidth, canvasHeight);
  angleMode(DEGREES);
  radius = min(canvasWidth, canvasHeight) / 5;
  earthX = radius;
  earthY = 0;
  prevAngle = 0;
}

function draw() {
  background(0);
  translate(width / 2, height / 2);

  textAlign(CENTER, CENTER);
  textSize(canvasWidth / (canvasWidth / (100 * 0.5)));
  text('☀️', 0, 0);

  let start = new Date(now.getFullYear(), 0, 0);
  let diff = now - start;
  let oneDay = 1000 * 60 * 60 * 24;
  let dayOfYear = Math.floor(diff / oneDay);

  let angle = map(dayOfYear, 0, 365, 0, 360);

  if (draggingOrbit) {
    angle = atan2(mouseY - height / 2, mouseX - width / 2);

    if (angle < 0) {
      angle += 360;
    }

    if (angle > prevAngle) {
      now.setDate(now.getDate() - 1);
    } else if (angle < prevAngle) {
      now.setDate(now.getDate() + 1);
    }

    prevAngle = angle;

    earthX = radius * cos(angle);
    earthY = radius * sin(angle);
  }

  noFill();
  stroke(orbitColor);
  strokeWeight(orbitThickness);
  ellipse(0, 0, radius * 2, radius * 2);

  textSize(canvasWidth / (canvasWidth / (50 * 0.5)));
  text('🌎', earthX, earthY);

  resetMatrix();
  textAlign(CENTER, CENTER);
  textSize(16);
  fill(255);
  text(now.toDateString(), width / 2, height - 30);
}

function mousePressed() {
  let distance = dist(mouseX - width / 2, mouseY - height / 2, earthX, earthY);

  if (distance < 25 && distance > 23) {
    draggingEarth = true;
  } else if (dist(mouseX - width / 2, mouseY - height / 2, 0, 0) < radius) {
    draggingOrbit = true;
  }
}

function mouseReleased() {
  draggingOrbit = false;
  draggingEarth = false;
}