​

//define & load imported image

let imgCrx;

let imgWBotton;

let imgEmojiNight;

let imgEmojiDay;

​

function preload() {

  imgCrx = loadImage('cross white.png');

​

  imgWBotton = loadImage('white botton.png');

  imgGBotton = loadImage('green botton.png');

​

  //12am - 12pm emojis

  imgEmojiNight = [loadImage('party emoji.png'), loadImage('crazy emoji.png'), loadImage('oops emoji.png'), loadImage('asleep emoji.png'), loadImage('drooling emoji.png'), loadImage('sleepy emoji.png'), loadImage('yawning emoji.png'), loadImage('pensive emoji.png')];

​

  //12pm - 12am emojis

  imgEmojiDay = [loadImage('hungry emoji.png'), loadImage('yawning emoji.png'), loadImage('sleepy emoji.png'), loadImage('down emoji.png'), loadImage('woozy emoji.png'), loadImage('burntout emoji.png'), loadImage('happy emoji.png'), loadImage('havefun emoji.png')];

}

​

let cx, cy;

let secondsRadius;

let minutesRadius;

let hoursRadius;

let clockDiameter;

let ccolors = ['#fdaac0', '#ffe661', '#89ffaa'];

let cOffset = 50;

let emojiOffset = 125;

let botton24;

let botton12;

​

function setup() {

  createCanvas(800, 800);

  let radius = min(width, height) / 2;

  secondsRadius = radius * 0.71;

  clockDiameter = radius * 1.2;

​

  //24 or 12 hour clock bottons

  botton24 = new Botton(130, 25);

  botton12 = new Botton(130, 55);

​

  cx = width / 2;

  cy = height / 2;

}

​

function draw() {

​

  background('#6e83ec');

​

  //24 or 12 hour botton

  textAlign(LEFT);

  textFont("VT323");

  fill(255);

  noStroke();

  textSize(20);

  text("24-hour clock", 10, 30);

  text("12-hour clock", 10, 60);

  botton24.show();

  botton12.show();

​

  //text for clock title

  textAlign(CENTER);

  textSize(30);

  text("Dan's weekend schedule", cx, cy + 30);

​

  //prompt words for hours

  textSize(25);

  if (hour() <= 8 && hour() > 4 && second() % 2 == 0) {

    text("Zzz ...(drooling everywhere)😴", cx, cy + 55);

  } else if (hour() <= 9 && hour() > 8 && second() % 2 == 0) {

    text("I will sleep early tonight!😫", cx, cy + 55);

  } else if (hour() <= 10 && hour() > 9 && second() % 2 == 0) {

    text("Let me go back to sleep!😖", cx, cy + 55);

  } else if (hour() <= 11 && hour() > 10 && second() % 2 == 0) {

    text("I am so tired...😞", cx, cy + 55);

  } else if (hour() <= 12 && hour() > 11 && second() % 2 == 0) {

    text("When is lunch time? 🥺", cx, cy + 55);

  } else if (hour() <= 14 && hour() > 12 && second() % 2 == 0) {

    text("(Food coma hits hard)👵🏼😪", cx, cy + 55);

  } else if (hour() <= 17 && hour() > 14 && second() % 2 == 0) {

    text("I don't want to work anymore.😫", cx, cy + 55);

  } else if (hour() <= 19 && hour() > 17 && second() % 2 == 0) {

    text("(Burnt out and hungry)🤯🤤", cx, cy + 55);

  } else if (hour() <= 20 && hour() > 19 && second() % 2 == 0) {

    text("Okay Google, play The Weeknd💃🏻", cx, cy + 55);

  } else if (hour() <= 22 && hour() > 20 && second() % 2 == 0) {

    text("Feeling hype for no reason😅", cx, cy + 55);

  } else if (hour() <= 24 && hour() > 22 && second() % 2 == 0) {

    text("Just one more episode...🥺", cx, cy + 55);

  } else if (hour() <= 2 && hour() >= 0 && second() % 2 == 0) {

    text("(Still watching HBO) 😬", cx, cy + 55);

  } else if (hour() <= 3 && hour() > 2 && second() % 2 == 0) {

    text("Oops.. I did it again😟", cx, cy + 55);

  }

​

  // Angles for sin() and cos() start at 3 o'clock;

  // subtract HALF_PI to make them start at the top

  let s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;

  let m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI;

  let mFake = map(minute(), 0, 60, 0, TWO_PI) - HALF_PI;

  let h = map(hour() % 12 + norm(minute(), 0, 60), 0, 12, 0, TWO_PI) - HALF_PI;

  let hFake = map(hour(), 0, 12, 0, TWO_PI) - HALF_PI;

​

  console.log("h:" + h);

  console.log("s:" + s);

​

  //debugger

  // fill(255);

  // noStroke();

  // textSize(15);

  // text("s : " + s, 200, 35);

  // text("m : " + m, 200, 65);

  // text("h : " + h, 200, 95);

​

  //define emoji movement

  emojiMovementH = random(-5, 5);

  emojiMovementL = random(-1, 1);

​

  //draw the snake food

  for (let a = 0; a < 360; a += 6) {

    let sAngle = radians(a);

    noFill();

    strokeWeight(5);

​

    stroke(ccolors[0]);

    let tick1X = cx + cos(sAngle) * (clockDiameter - cOffset) / 2;

    let tick1Y = cy + sin(sAngle) * (clockDiameter - cOffset) / 2;

    circle(tick1X, tick1Y, 1);

​

    stroke(ccolors[1]);

    let tick2X = cx + cos(sAngle) * (clockDiameter) / 2;

    let tick2Y = cy + sin(sAngle) * (clockDiameter) / 2;

    circle(tick2X, tick2Y, 1);

  }

​

  for (let c = 0; c < 360; c += 30) {

    let hAngle = radians(c);

    stroke(ccolors[2]);

    let tick3X = cx + cos(hAngle) * (clockDiameter + cOffset) / 2;

    let tick3Y = cy + sin(hAngle) * (clockDiameter + cOffset) / 2;

    circle(tick3X, tick3Y, 1);

  }

​

  //emoji for the day

  imageMode(CENTER);

  //emoji face  from 12 am - 12 pm;

  if (hour() < 12 && hour() >= 0) {

    image(imgEmojiNight[0], cx + emojiMovementH, cy - (clockDiameter + emojiOffset) / 2 + emojiMovementH, 30, 30);

    image(imgEmojiNight[1], cx + cos(PI / 4) * (clockDiameter + emojiOffset) / 2 + emojiMovementH, cy - sin(PI / 4) * (clockDiameter + emojiOffset) / 2 + emojiMovementH, 30, 30);

    image(imgEmojiNight[2], cx + (clockDiameter + emojiOffset) / 2 + emojiMovementL, cy + emojiMovementL, 30, 30);

    image(imgEmojiNight[3], cx + cos(PI / 4) * (clockDiameter + emojiOffset) / 2, cy + sin(PI / 4) * (clockDiameter + emojiOffset) / 2, 30, 30);

    image(imgEmojiNight[4], cx, cy + (clockDiameter + emojiOffset) / 2, 30, 30);

    image(imgEmojiNight[5], cx - cos(PI / 4) * (clockDiameter + emojiOffset) / 2, cy + sin(PI / 4) * (clockDiameter + emojiOffset) / 2, 30, 30);

    image(imgEmojiNight[6], cx - (clockDiameter + emojiOffset) / 2, cy, 30, 30);

    image(imgEmojiNight[7], cx - cos(PI / 4) * (clockDiameter + emojiOffset) / 2 + emojiMovementL, cy - sin(PI / 4) * (clockDiameter + emojiOffset) / 2 + emojiMovementL, 30, 30);

  } else {

    //emoji face  from 12pm - 12am

    image(imgEmojiDay[0], cx + emojiMovementH, cy - (clockDiameter + emojiOffset) / 2 + emojiMovementH, 30, 30);

    image(imgEmojiDay[1], cx + cos(PI / 4) * (clockDiameter + emojiOffset) / 2, cy - sin(PI / 4) * (clockDiameter + emojiOffset) / 2, 30, 30);

    image(imgEmojiDay[2], cx + (clockDiameter + emojiOffset) / 2, cy, 30, 30);

    image(imgEmojiDay[3], cx + cos(PI / 4) * (clockDiameter + emojiOffset) / 2, cy + sin(PI / 4) * (clockDiameter + emojiOffset) / 2, 30, 30);

    image(imgEmojiDay[4], cx, cy + (clockDiameter + emojiOffset) / 2, 30, 30);

    image(imgEmojiDay[5], cx - cos(PI / 4) * (clockDiameter + emojiOffset) / 2 + emojiMovementL, cy + sin(PI / 4) * (clockDiameter + emojiOffset) / 2 + emojiMovementL, 30, 30);

    image(imgEmojiDay[6], cx - (clockDiameter + emojiOffset) / 2 + emojiMovementH, cy + emojiMovementH, 30, 30);

    image(imgEmojiDay[7], cx - cos(PI / 4) * (clockDiameter + emojiOffset) / 2 + emojiMovementH, cy - sin(PI / 4) * (clockDiameter + emojiOffset) / 2 + emojiMovementH, 30, 30);

  }

​

  //draw the clock arc

  stroke(ccolors[0]);

  endCircle(s, -cOffset);

  stroke(ccolors[1]);

  endCircle(m, 0);

  stroke(ccolors[2]);

  endCircle(h, cOffset);

​

  if (second() % 2 == 0 && s > -1.57) {

    //draw snake tongue

    strokeWeight(3);

    stroke(ccolors[0]);

    arc(cx, cy, clockDiameter - cOffset, clockDiameter - cOffset, s, s + PI / 30);

    stroke(ccolors[1]);

    arc(cx, cy, clockDiameter, clockDiameter, mFake, mFake + PI / 30);

    stroke(ccolors[2]);

    arc(cx, cy, clockDiameter + cOffset, clockDiameter + cOffset, hFake, hFake + PI / 6);

​

    //draw snake eyes

    stroke(255);

    strokeWeight(2);

    fill(0);

    circle(cx + cos(s) * (clockDiameter - cOffset + 8) / 2, cy + sin(s) * (clockDiameter - cOffset + 8) / 2, 5);

    circle(cx + cos(s) * (clockDiameter - cOffset - 8) / 2, cy + sin(s) * (clockDiameter - cOffset - 8) / 2, 5);

    circle(cx + cos(m) * (clockDiameter + 8) / 2, cy + sin(m) * (clockDiameter + 8) / 2, 5);

    circle(cx + cos(m) * (clockDiameter - 8) / 2, cy + sin(m) * (clockDiameter - 8) / 2, 5);

    circle(cx + cos(h) * (clockDiameter + cOffset + 8) / 2, cy + sin(h) * (clockDiameter + cOffset + 8) / 2, 5);

    circle(cx + cos(h) * (clockDiameter + cOffset - 8) / 2, cy + sin(h) * (clockDiameter + cOffset - 8) / 2, 5);

  }

​

  //when the snake finishes a circle, he dies and his eyes shows "x x"

  if (s < -1.57) {

    imageMode(CENTER);

    image(imgCrx, cx + cos(s) * (clockDiameter - cOffset + 8) / 2, cy + sin(s) * (clockDiameter - cOffset + 8) / 2, 10, 10);

    image(imgCrx, cx + cos(s) * (clockDiameter - cOffset - 8) / 2, cy + sin(s) * (clockDiameter - cOffset - 8) / 2, 10, 10);

  } else if (m < -1.57) {

    image(imgCrx, cx + cos(m) * (clockDiameter + 8) / 2, cy + sin(m) * (clockDiameter + 8) / 2, 10, 10);

    image(imgCrx, cx + cos(m) * (clockDiameter - 8) / 2, cy + sin(m) * (clockDiameter - 8) / 2, 10, 10);

  } else if (h < -1.57) {

    image(imgCrx, cx + cos(h) * (clockDiameter + cOffset + 8) / 2, cy + sin(m) * (clockDiameter + cOffset + 8) / 2, 10, 10);

    image(imgCrx, cx + cos(h) * (clockDiameter + cOffset - 8) / 2, cy + sin(m) * (clockDiameter + cOffset - 8) / 2, 10, 10);

  }

}

​

function mousePressed() {

  botton24.clicked(mouseX, mouseY);

  botton12.clicked(mouseX, mouseY);

}

​

function endCircle(endAngle, radiusOffset) {

  // let this_

  let angle = 0 - HALF_PI;

  if (angle <= endAngle) {

    endAngle -= TWO_PI;

  }

  //function for the clock arc

  noFill();

  strokeWeight(12);

  arc(cx, cy, clockDiameter + radiusOffset, clockDiameter + radiusOffset, angle, endAngle);

}

​

​

​