Initial commit

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

README.md

@@ -0,0 +1,5 @@
+# SmoothClock
+
+A smooth html canvas + js clock
+
+[Live version](https://klemek.github.io/SmoothClock/)

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);
+});

index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Smooth Clock</title>
+    <link rel="stylesheet" href="main.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+</head>
+
+<body>
+    <canvas id="canvas"></canvas>
+    <script src="clock.js"></script>
+</body>
+
+</html>

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;
+}