GTECH734_Lab2_Clocks

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>

  <body>
    <h1>Mishka's Time Service</h1>

    <canvas id="myCanvas" width="800" height="400" style="background-color:#A9A9A9">
    </canvas>

    <script> src = script.js></script>

  </body>
</html>

{
  "plnkr": {
    "runtime": "system"
  }
}

/* Add your styles here */

// GTECH 734 GeoWeb Services
// Spring 2020
// Lab 2: JavaScript Clocks

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

setInterval(drawAnalogClock, 40); // Draws ticking analog clock
// setInterval(drawDigitalClock, 1000); // Draws ticking digital clock
drawDigitalClock();
drawDayDate(); // Bonus: Adds day of the week and date

// ANALOG CLOCK

// Use canvas height to calculate radius
// Remap (0,0) to 1/4 canvas width and 1/2 canvas height
var radius = canvas.height * 0.50; 
ctx.translate(canvas.width * 0.25, radius);
radius = radius * 0.90;

// Function draws analog clock
function drawAnalogClock() {
  drawFace(ctx, radius);
  drawTicks(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius);
}

// Function draws clock face
function drawFace(ctx, radius) {
  // Draws circle
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0 , 2 * Math.PI);
  ctx.fillStyle = "#FFE4E1";
  ctx.fill();

  // Adds gradient
  grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);
  grad.addColorStop(0, '#333');
  grad.addColorStop(0.5, "#BC8F8F");
  grad.addColorStop(1, '#333');
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius*0.1;
  ctx.stroke();

  // Draws clock center
  ctx.beginPath();
  ctx.arc(0, 0, radius * 0.05, 0, 2 * Math.PI);
  ctx.fillStyle = "#404040";
  ctx.fill();
}

// Function draws number ticks as circles
// Larger circles for multiples of 5
function drawTicks(ctx, radius, length) {
  var ang, length = radius * 0.90;
  
  for(num = 0; num < 60; ++num){
    if(num % 5 == 0) {
      ang = num * Math.PI / 30;
      ctx.beginPath();
      ctx.rotate(ang);
      ctx.arc(0, -0.985 * length, 5, 0, 2 * Math.PI);
      ctx.fillStyle = "#999999";
      ctx.fill();
      ctx.rotate(-ang);
    }
    else {
      ang = num * Math.PI / 30;
      ctx.beginPath();
      ctx.rotate(ang);
      ctx.arc(0, -0.985 * length, 1.5, 0, 2 * Math.PI);
      ctx.fillStyle = "#999999";
      ctx.fill();
      ctx.rotate(-ang);
    }
  }
}

// Function draws clock numbers
function drawNumbers(ctx, radius) {
  var ang;
  var num;
  
  ctx.font = radius * 0.15 + "px Arial";
  ctx.textBaseline = "middle";
  ctx.textAlign = "center";
  
  for(num = 1; num < 13; ++num){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius * 0.75);
    ctx.rotate(-ang);
    ctx.fillStyle = "#4d4d4d";
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius * 0.75);
    ctx.rotate(-ang);
  }
}

// Function draws time and clock hands
function drawTime(ctx, radius) {
  var now = new Date();
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();
  var milliSecond = now.getMilliseconds();

  // Hour
  hour = hour%12;
  hour = (hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
  drawHand(ctx, hour, radius*0.5, radius*0.05);
  
  // Minute
  minute = (minute*Math.PI/30)+(second*Math.PI/(30*60));
  drawHand(ctx, minute, radius*0.8, radius*0.04);
  
  // Second
  second = second = (second+milliSecond/1000)*Math.PI/30;
  drawHand(ctx, second, radius*0.85, radius*0.02);
}

function drawHand(ctx, pos, length, width) {
  ctx.beginPath();
  ctx.lineWidth = width;
  ctx.lineCap = "round";
  ctx.moveTo(0,0);
  ctx.rotate(pos);
  ctx.lineTo(0, -length);
  ctx.strokeStyle = "#404040";
  ctx.stroke();
  ctx.rotate(-pos);
}

// DIGITAL CLOCK

// Function draws digital clock
function drawDigitalClock() {
  var now = new Date();

  // Hour
  var hour = now.getHours();
  // Convert from 24hr to 12hr format
  var tempHour = hour;
  tempHour = hour > 12 ? (parseInt(hour, 10)) - 12 : hour;
  
  // Determine time of day
  var dayTime = 12 <= hour ? "PM" : "AM";
  
  // Minute
  var minute = now.getMinutes();
  // Add leading zero to single digit minutes
  minute = minute > 9 ? minute : "0" + minute;
  
  // Second
  var second = now.getSeconds();
  // Add leading zero to single digit seconds
  second = second > 9 ? second : "0" + second;

  // Draw digital clock background
  ctx.fillStyle = "#737373";
  ctx.fillRect(420, 220, 360, 160);

  // Add current time
  ctx.font = "70px Impact";
  ctx.fillStyle = "#9c3030";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(tempHour + ":" + minute + ":" + second + " " + dayTime, 600, 300);
}

// BONUS: CURRENT DAY AND DATE

// Function adds current day and date to canvas
function drawDayDate() {
  var now = new Date();
  
  // Day
  var day = now.getDay();
  var days = ["Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"];
  day = days[day];
  
  // Month
  var month = now.getMonth();
  var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  month = months[month]
  
  // Date
  var date = now.getDate();
  
  // Year
  var year = now.getFullYear();

  // Draw background for day and date
  ctx.beginPath();
  ctx.arc(500, 100, 85, 0 , 2 * Math.PI);
  ctx.fillStyle = "#737373";
  ctx.fill();

  ctx.beginPath();
  ctx.arc(700, 100, 85, 0 , 2 * Math.PI);
  ctx.fillStyle = "#737373";
  ctx.fill();

  // Add current day
  ctx.font = "45px Impact";
  ctx.fillStyle = "#9c3030";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(day, 500, 100);

  // Add current date
  ctx.font = "25px Impact";
  ctx.fillStyle = "#9c3030";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(month + " " + date + ", " + year, 700, 100);
}