commit 0b595a354ab441633eea4390a4fa2764f3fd1905 Author: Klemek Date: Thu Jan 31 02:05:31 2019 +0100 Initial commit diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..dfe0770 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +# Auto detect text files and perform LF normalization +* text=auto diff --git a/README.md b/README.md new file mode 100644 index 0000000..9af7a8d --- /dev/null +++ b/README.md @@ -0,0 +1,5 @@ +# SmoothClock + +A smooth html canvas + js clock + +[Live version](https://klemek.github.io/SmoothClock/) \ No newline at end of file diff --git a/clock.js b/clock.js new file mode 100644 index 0000000..168059a --- /dev/null +++ b/clock.js @@ -0,0 +1,165 @@ +'floor|round|abs|sqrt|PI|sin|cos|pow|max|min' +.split('|') + .forEach(function (p) { + window[p] = Math[p]; + }); + + +$("h1").css("font-weight", "bold"); + +var canvas = document.getElementById("canvas"), + ctx = canvas.getContext('2d'), + height = canvas.height = window.innerHeight, + width = canvas.width = window.innerWidth; + +ctx.lineJoin = 'round'; + +window.onresize = function () { + width = canvas.width = window.innerWidth; + height = canvas.height = window.innerHeight; + cx = width / 2; + cy = height / 2; + r = min(width / 2.1, height / 2.1); + +} + +function padleft(s, v, n) { + while (s.length < n) { + s = v + s; + } + return s; +} + +function rgb(hsl) { + var h = hsl[0] / 60, + s = hsl[1], + l = hsl[2], + c = s * (1 - abs(2 * l - 1)), + x = c * (1 - abs(h % 2 - 1)), + m = l - c / 2, + rgb; + if (isNaN(h)) { + rgb = [0, 0, 0]; + } else if (h < 1) { + rgb = [c, x, 0]; + } else if (h < 2) { + rgb = [x, c, 0]; + } else if (h < 3) { + rgb = [0, c, x]; + } else if (h < 4) { + rgb = [0, x, c]; + } else if (h < 5) { + rgb = [x, 0, c]; + } else { + rgb = [c, 0, x]; + } + return [floor((rgb[0] + m) * 255), floor((rgb[1] + m) * 255), floor((rgb[2] + m) * 255)]; +} + +function hexa(rgb) { + return "#" + padleft(rgb[0].toString(16), "0", 2) + padleft(rgb[1].toString(16), "0", 2) + padleft(rgb[2].toString(16), "0", 2); +} + +function line(cx, cy, r0, r1, a) { + ctx.moveTo(cx + r0 * cos(a), cy + r0 * sin(a)); + ctx.lineTo(cx + r1 * cos(a), cy + r1 * sin(a)); +} + +function loop() { + + var date = new Date(Date.now()), + t = date.getTime(), + h = date.getHours() % 12, + m = date.getMinutes(), + s = date.getSeconds(), + mi = date.getMilliseconds(), + ha = (h + m / 60 + s / 3600) * 2 * PI / 12 - PI / 2, + ma = (m + s / 60 + mi / 60000) * 2 * PI / 60 - PI / 2, + sa = (s + mi / 1000) * 2 * PI / 60 - PI / 2, + k, i, delta = 0, + color = hexa(rgb([(t * 6 / 10000 + delta) % 360, 1, 0.5])), + invcolor = hexa(rgb([(t * 6 / 10000 + 180 + delta) % 360, 1, 0.5])); + + if (abs(sa - ma) <= PI / 200 && abs(ma - ha) <= PI / 200) { + delta = 180; + } + + ctx.lineWidth = 1 + floor(min(width, height) / 40); + ctx.strokeStyle = invcolor; + ctx.fillStyle = color; + $(".colored").css("color", invcolor); + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.fillRect(0, 0, canvas.width, canvas.height); + ctx.beginPath(); + + for (k = 1; k <= 3; k++) { + ctx.moveTo(cx + k * r / 3, cy); + ctx.arc(cx, cy, k * r / 3, 0, PI * 2); + } + + + line(cx, cy, 0, r / 3, ha); + line(cx, cy, r / 3, 2 * r / 3, ma); + line(cx, cy, 2 * r / 3, r, sa); + ctx.stroke(); + ctx.closePath(); + ctx.lineWidth = 1 + floor(min(width, height) / 80); + ctx.beginPath(); + for (i = 0; i < 3; i += 1) { + if (i === c0 && c[i] < 1) { + c[i] += 0.1; + } else if (i !== c0 && c[i] > 0) { + c[i] -= 0.1; + } + for (k = 0; k <= 12; k++) { + line(cx, cy, (i + 1 - 0.4 * c[i]) * r / 3, (i + 1) * r / 3, k * 2 * PI / 12) + } + if (i > 0) { + for (k = 0; k <= 60; k++) { + line(cx, cy, (i + 1 - 0.2 * c[i]) * r / 3, (i + 1) * r / 3, k * 2 * PI / 60) + } + } + } + + ctx.stroke(); + ctx.closePath(); +} + +function move(e) { + var x = e.clientX, + y = e.clientY, + r2 = sqrt(pow(x - cx, 2) + pow(y - cy, 2)); + c0 = floor(3 * r2 / r); +} + +var c = [0, 0, 0], + c0 = 3, + cx = width / 2, + cy = height / 2, + r = min(width / 2.1, height / 2.1), + myInterval = setInterval(loop, 1000 / 30); + +$(document).ready(function () { + $('.preview').hover(function (event) { //Open on hover + if (event.currentTarget.id != undefined) { + $("#preview img").attr("src", ""); + $("#preview img").attr("src", "img/" + event.currentTarget.id + ".jpg"); + $("#preview").stop(); + $("#preview").animate({ + width: '100%', + opacity: '1' + }, 200) + } + }, + function (event) { //Close when not hovered + if (event.currentTarget.id != undefined) { + $("#preview").stop(); + $("#preview").animate({ + width: '0%', + opacity: '0' + }, 200) + } + }); + + document.addEventListener("mousemove", move); +}); diff --git a/index.html b/index.html new file mode 100644 index 0000000..2eb7902 --- /dev/null +++ b/index.html @@ -0,0 +1,16 @@ + + + + + + Smooth Clock + + + + + + + + + + \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 0000000..4542f5d --- /dev/null +++ b/main.css @@ -0,0 +1,64 @@ +body { + margin: 0; +} + +canvas { + display: block; + position: absolute; + width: 100vw; + height: 100vh; + background: #000; +} + +a:hover { + font-weight: bold; +} + +a:visited { + font-style: italic; +} + +#pan1, +#pan2 { + box-sizing: border-box; + position: absolute; + border-radius: 5px; + z-index: 1; + top: .25em; + padding: 0.5em 1em; + background: #262626; + color: #aaa; + text-align: left; + font: 1em trebuchet ms, verdana, sans serif; + transition: opacity 0.5s; + opacity: 0.9; +} + +#preview { + width: 0%; + opacity: 0; + margin: auto; + margin-top: 0; + margin-bottom: 0; +} + +#preview img { + border-radius: 5px; + border: 3px solid #aaa; + margin: inherit; + width: 95%; +} + +#pan1 { + left: .25em; +} + +#pan2 { + right: .25em; +} + +#hidden-player { + position: absolute; + visibility: hidden; + display: inline; +}