Day cycle animation over 20 seconds with Ash palette

index.html

@@ -14,7 +14,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/vanta@0.5.24/dist/vanta.clouds.min.js"></script>
     <script>
-        VANTA.CLOUDS({
+        var effect = VANTA.CLOUDS({
             el: "#vanta",
             mouseControls: false,
             touchControls: false,
@@ -30,6 +30,68 @@
             cloudColor: 0x6d6a63,
             lightColor: 0xe6dfd1
         });
+
+        function hexToRgb(h) {
+            return [(h >> 16) & 255, (h >> 8) & 255, h & 255];
+        }
+        function rgbToHex(r, g, b) {
+            return (Math.round(r) << 16) | (Math.round(g) << 8) | Math.round(b);
+        }
+        function lerp(a, b, t) {
+            return a + (b - a) * t;
+        }
+        function lerpColor(c1, c2, t) {
+            var a = hexToRgb(c1), b = hexToRgb(c2);
+            return rgbToHex(lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t));
+        }
+        function smooth(t) {
+            return t * t * (3 - 2 * t);
+        }
+
+        var CYCLE = 20000;
+
+        var palette = [
+            { t: 0.00, sky: 0x100f12, cloud: 0x54514f, light: 0x999187 },
+            { t: 0.15, sky: 0x29282c, cloud: 0x6d6a63, light: 0xb0a89a },
+            { t: 0.30, sky: 0x1c1b1f, cloud: 0x6d6a63, light: 0xe6dfd1 },
+            { t: 0.50, sky: 0x3a383d, cloud: 0x999187, light: 0xf3ede1 },
+            { t: 0.70, sky: 0x29282c, cloud: 0x6d6a63, light: 0xe0914f },
+            { t: 0.85, sky: 0x1c1b1f, cloud: 0x54514f, light: 0xb0a89a },
+            { t: 1.00, sky: 0x100f12, cloud: 0x54514f, light: 0x999187 }
+        ];
+
+        function getColor(t) {
+            t = t % 1;
+            for (var i = 0; i < palette.length - 1; i++) {
+                if (t >= palette[i].t && t <= palette[i + 1].t) {
+                    var span = palette[i + 1].t - palette[i].t;
+                    var localT = span === 0 ? 0 : (t - palette[i].t) / span;
+                    var s = smooth(localT);
+                    return {
+                        sky: lerpColor(palette[i].sky, palette[i + 1].sky, s),
+                        cloud: lerpColor(palette[i].cloud, palette[i + 1].cloud, s),
+                        light: lerpColor(palette[i].light, palette[i + 1].light, s)
+                    };
+                }
+            }
+            return { sky: palette[0].sky, cloud: palette[0].cloud, light: palette[0].light };
+        }
+
+        var startTime = Date.now();
+
+        function animate() {
+            var elapsed = (Date.now() - startTime) % CYCLE;
+            var t = elapsed / CYCLE;
+            var c = getColor(t);
+            effect.setOptions({
+                skyColor: c.sky,
+                cloudColor: c.cloud,
+                lightColor: c.light
+            });
+            requestAnimationFrame(animate);
+        }
+
+        animate();
     </script>
 </body>
 </html>