diffusion-local-time/morph.html at trunk · lsb/diffusion-local-time · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
<head>
    <title>Current time</title>
    <style>
        html {
  box-sizing: border-box;
  font-size: 16px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

        #displayText  { font-family: monospace; position: fixed; top: 0; right: 0; font-size: 2in; opacity: 0.0005; z-index: 100;}
        #face { height: 56.25vw; width: 100vw; position: fixed; top: 0; left: 0;}
        #nextface { height: 56.25vw; width: 100vw; position: fixed; top: 0; left: 0; opacity: 0.00001;}
        body { background-color: black;}
        #signature { position: fixed; bottom: 0.5in; right: 0.5in; font-size: 0.5in; z-index: 100; opacity: 0.5; color: white;}
    </style>
    <script>
        const smoothstep = (frac) => 3 * frac * frac - 2 * frac * frac * frac;
        const smoothstep2 = (frac) => frac * frac * frac * (frac * (frac * 6 - 15) + 10);
        const smoothstep6 = (frac) => 924 * Math.pow(frac, 13) - 6006 * Math.pow(frac, 12) + 16380 * Math.pow(frac, 11) - 24024 * Math.pow(frac, 10) + 20020 * Math.pow(frac, 9) - 9009 * Math.pow(frac, 8) + 1716 * Math.pow(frac, 7);
        // const step_fraction = 1/32;
        const prefix = "xl-morph/xl";
        // const step_fraction = 1/8;
        // const prefix = "xs1600";
        // const image_steps = Array.from({length: (1 + 1/step_fraction)}, (_, i) => i * step_fraction); // apparently python {0.03125:.4f} is 0.0312 while {0.09375:.4f} is 0.0938
        const image_steps = [0.0, 0.0312, 0.0625, 0.0938, 0.125, 0.1562, 0.1875, 0.2188, 0.2500, 0.2812, 0.3125, 0.3438, 0.3750, 0.4062, 0.4375, 0.4688, 0.5000, 0.5312, 0.5625, 0.5938, 0.6250, 0.6562, 0.6875, 0.7188, 0.7500, 0.7812, 0.8125, 0.8438, 0.8750, 0.9062, 0.9375, 0.9688, 1.0];

        function updateImage() {
            const d = new Date();
            // d.setHours(0);
            const   hourOfDay = d.getHours();
            const minuteOfDay = d.getMinutes();
            const secondOfDay = d.getSeconds() + d.getMilliseconds() / 1000;
            const smoothMinuteFraction = smoothstep6((secondOfDay / 60));
            // find closest image step to smoothMinuteFraction
            const step = image_steps.reduce((a, b) => Math.abs(b - smoothMinuteFraction) < Math.abs(a - smoothMinuteFraction) ? b : a);
            if(step === 1) {
                d.setMinutes(minuteOfDay + 1); // this overflows to hours correctly
            }
            const hodz2 = d.getHours().toString().padStart(2,'0');
            const modz2 = d.getMinutes().toString().padStart(2, '0');
            const finalstep4 = (step === 1 ? 0 : step).toFixed(4);
            const img_path = `./${prefix}-morph-${hodz2}${modz2}-${finalstep4}.png`;
            const displayText = `${hourOfDay.toString().padStart(2,'0')}:${minuteOfDay.toString().padStart(2,'0')}:${(secondOfDay < 10 ? "0" : "") + secondOfDay.toFixed(4)} (${smoothMinuteFraction.toFixed(4)}) @ ${img_path}`;
            const tinyDisplayText = `${hodz2}:${modz2} @ ${finalstep4}`;
            // document.getElementById("displayText").textContent = displayText;
            document.getElementById("face").src = img_path;
            // document.getElementById("face").title = tinyDisplayText;
            const nextstep = image_steps[(image_steps.indexOf(step) + 1) % (image_steps.length - 1)];
            if (nextstep < step) {
                d.setMinutes(minuteOfDay + 1); // this overflows to hours
            }
            const hodz2next = d.getHours().toString().padStart(2,'0');
            const modz2next = d.getMinutes().toString().padStart(2, '0');
            const finalstep4next = nextstep.toFixed(4);
            const img_path_next = `./${prefix}-morph-${hodz2next}${modz2next}-${finalstep4next}.png`;
            document.getElementById("nextface").src = img_path_next;
            // document.getElementById("nextface").title = `${hodz2next}:${modz2next} @ ${finalstep4next}`;
            document.getElementById("displayText").textContent = displayText + ` (${img_path_next})`;

            document.getElementById("nextface").onload = (() => requestAnimationFrame(updateImage));
        }
        window.onload = updateImage;
    </script>
</head>
<body>
    <h1 id="displayText">time of day</h1>
    <img id="face" src="">
    <img id="nextface" src="">
    <div id="signature">by Lee Butterman</div>
</body>
</html>