var canvas, ctx; const W = window.innerWidth; const H = 7*window.innerHeight/10; const radius = W/2 - 25; var clock = 0; const cols = 6; const rows = 3; var particles = create2DArray(rows, cols); alert("To toggle the clocks, press on the current clock") window.onload = function() { canvas = document.getElementById("clock"); ctx = canvas.getContext("2d"); canvas.width = W; canvas.height = H; createParticles(rows, cols); particles[0][0] = null; canvas.addEventListener("click", function() { if (clock == 5) { clock = 0; } else { clock++; } }); draw(); } function draw() { window.requestAnimationFrame(draw); var date = new Date(); // Time var hour = date.getHours(); if (hour > 12) hour-= 12; var mins = date.getMinutes(); var secs = date.getSeconds(); // Date var weekdays = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; var months = ['January','February','March','April','May','June','July','August','September','October','November','December']; var wday = weekdays[ date.getDay() ]; var month = months[ date.getMonth() ]; document.getElementsByTagName("div")[0].innerHTML = wday + "
" + date.getDate() + " " + month.slice(0,3) + " " + date.getFullYear(); ctx.beginPath(); ctx.clearRect(0,0,W,H); ctx.lineCap ="round"; ctx.closePath(); if (clock == 0) { var values = [ [2, radius, "red", getAngle(secs, 60)], [5, radius-30, "black", getAngle(mins+secs/60, 60)], [5, radius-80, "black", getAngle(hour+mins/60, 12)] ]; drawWall(secs, mins, hour, values, false); } else if (clock == 1) { var a1 = getAngle(secs + date.getMilliseconds()/1000, 60) var a2 = getAngle(mins + secs/60, 60); var a3 = getAngle(hour + mins/60, 12); if (a3 > 3*Math.PI/2) { a3 -= 2*Math.PI; } var values = [ [a1, "hsl(220, 100%, 50%)", radius, 2], [a2, "hsl(24, 100%, 50%)", radius-20, 5], [a3, "hsl(350, 100%, 50%)", radius-40, 10] ]; for (var i=0; i 9 ? mins : "0"+mins), W/2, H/2+12.5); } else if (clock == 2) { var values = [ new function() { this.x = W/7; this.y = H/8; this.yFill = this.y + ((24-date.getHours()) / 24) * H/2; this.hFill = H/2 + this.y - this.yFill; this.value = date.getHours(); this.color = "#f74b07"; }, new function() { this.x = 5*W/7; this.y = H/8; this.yFill = this.y + ((60-secs) / 60) * H/2; this.hFill = H/2 + this.y - this.yFill; this.value = secs <= 9 ? "0" + secs : secs; this.color = "#4286f4"; }, new function() { this.x = 3*W/7; this.y = H/8; this.yFill = this.y + ((60-mins) / 60) * H/2; this.hFill = H/2 + this.y - this.yFill; this.value = mins <= 9 ? "0" + mins : mins; this.color = "#0dd606"; }, ]; for (var i=0; i 9 ? mins : "0"+mins, secs > 9 ? secs : "0"+secs]; ctx.font = "30px Josefin Sans"; ctx.fillStyle = "black"; for (var i=0; i 9 ? hrs : "0" + hrs; var s = secs > 9 ? secs : "0" + secs; var m = mins > 9 ? mins : "0" + mins; var colour = "#"+h+m+s; ctx.fillStyle = colour; var offset = 50; if (clock == 4) { ctx.fillRect(offset,offset, W-offset*2, H-offset*2); } else { ctx.beginPath(); ctx.arc(W/2, H/2, W/2-offset, 0, 2*Math.PI); ctx.fill(); ctx.closePath(); } ctx.font = "50px Josefin Sans" ctx.fillStyle = "rgba(255,255,255,0.6)"; ctx.fillText(colour, W/2, H/2) } } // Values : lineWidth, length, colour, angle, function drawWall(secs, mins, hour, values, text) { // Wallclock ctx.beginPath(); ctx.fillStyle = "white"; ctx.strokeStyle = "black"; ctx.arc(W/2, H/2, radius + 10, 0, 2*Math.PI); ctx.fill(); ctx.stroke(); ctx.closePath(); var points = [[], []] points[0] = getPointsOnCircle(W/2, H/2, radius, 12); points[1] = getPointsOnCircle(W/2, H/2, radius-10, 12); // Points for (var i=0; i<12; i++) { ctx.beginPath(); ctx.strokeStyle = "black"; ctx.moveTo(points[0][i].x, points[0][i].y); ctx.lineTo(points[1][i].x, points[1][i].y); ctx.stroke(); ctx.closePath(); } // Hands for (var i=0; i<3; i++) { ctx.beginPath(); ctx.lineWidth = values[i][0]; ctx.strokeStyle = values[i][2] ctx.moveTo(W/2, H/2); ctx.lineTo(W/2 + values[i][1] * Math.cos(values[i][3]), H/2 + values[i][1]* Math.sin(values[i][3])) ctx.stroke(); ctx.closePath(); } } function getPointsOnCircle(x, y, r, sides) { var points = []; for (var i=-Math.PI/2; i<3*Math.PI/2; i+=2*Math.PI/sides) { var xp = x + r * Math.cos(i); var yp = y + r * Math.sin(i); points.push({x:xp, y:yp}); } return points; } function getPosOnCircumference(x, y, a, r) { return {x:x+Math.cos(a)*r, y:y+Math.sin(a)*r} } function getAngle(num, limit) { if (num == 0) return 3*Math.PI/2; return num / limit * 2 * Math.PI - Math.PI/2 } function binary(num) { var output = (num >>> 0).toString(2).split(""); var len = 6 - output.length; for (var i=0; i

Clock (5 in 1) - ft. Canvas