zink/animated_wallpaper
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch to clouds effect with sun parameters

Browse Source
This commit is contained in:
Richard Zink committed 2026-10-07 07:04:35 +02:00
1 parent bd96a1731b
commit f5d799e398
1 file changed
+25 -16
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+25 -16
View File
@@ -26,7 +26,7 @@
<div id="vanta"></div>
<div id="clock">00:00</div>
<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 src="https://cdn.jsdelivr.net/npm/vanta@0.5.21/dist/vanta.clouds.min.js"></script>
<script>
var effect = VANTA.CLOUDS({
el: "#vanta",
@@ -42,7 +42,10 @@
backgroundAlpha: 1,
skyColor: 0x1c1b1f,
cloudColor: 0x6d6a63,
lightColor: 0xe6dfd1
cloudShadowColor: 0x100f12,
sunColor: 0xe0914f,
sunGlareColor: 0xc15c46,
sunlightColor: 0xd6b46a
});
function hexToRgb(h) {
@@ -65,17 +68,17 @@
var CYCLE = 20000;
var palette = [
{ t: 0.00, sky: 0x100f12, cloud: 0x54514f, light: 0x3a383d },
{ t: 0.08, sky: 0x1c1b1f, cloud: 0x54514f, light: 0x4a4855 },
{ t: 0.18, sky: 0x2a2429, cloud: 0x6d5a4f, light: 0xa85f1d },
{ t: 0.28, sky: 0x4a3528, cloud: 0x8a6a5a, light: 0xd6b46a },
{ t: 0.40, sky: 0x4a3a30, cloud: 0x999187, light: 0xe0914f },
{ t: 0.50, sky: 0x54514f, cloud: 0xb0a89a, light: 0xf3ede1 },
{ t: 0.60, sky: 0x4a4540, cloud: 0xa59a89, light: 0xe6dfd1 },
{ t: 0.70, sky: 0x3a2a22, cloud: 0x8a6a5a, light: 0xe0914f },
{ t: 0.82, sky: 0x2a1f1f, cloud: 0x6d4a44, light: 0xc15c46 },
{ t: 0.92, sky: 0x1c1b1f, cloud: 0x54514f, light: 0x54514f },
{ t: 1.00, sky: 0x100f12, cloud: 0x54514f, light: 0x3a383d }
{ t: 0.00, sky: 0x100f12, cloud: 0x54514f, cloudShadow: 0x100f12, sun: 0x3a383d, sunGlare: 0x29282c, sunLight: 0x29282c },
{ t: 0.08, sky: 0x1c1b1f, cloud: 0x54514f, cloudShadow: 0x100f12, sun: 0x4a4855, sunGlare: 0x3a383d, sunLight: 0x54514f },
{ t: 0.18, sky: 0x2a2429, cloud: 0x6d5a4f, cloudShadow: 0x1c1b1f, sun: 0xa85f1d, sunGlare: 0xc56a2b, sunLight: 0xd6b46a },
{ t: 0.28, sky: 0x4a3528, cloud: 0x8a6a5a, cloudShadow: 0x29282c, sun: 0xe0914f, sunGlare: 0xe0914f, sunLight: 0xe0914f },
{ t: 0.40, sky: 0x4a3a30, cloud: 0x999187, cloudShadow: 0x54514f, sun: 0xe6dfd1, sunGlare: 0xe0914f, sunLight: 0xf3ede1 },
{ t: 0.50, sky: 0x54514f, cloud: 0xb0a89a, cloudShadow: 0x54514f, sun: 0xf3ede1, sunGlare: 0xe6dfd1, sunLight: 0xf3ede1 },
{ t: 0.60, sky: 0x4a4540, cloud: 0xa59a89, cloudShadow: 0x54514f, sun: 0xe6dfd1, sunGlare: 0xe0914f, sunLight: 0xe6dfd1 },
{ t: 0.70, sky: 0x3a2a22, cloud: 0x8a6a5a, cloudShadow: 0x29282c, sun: 0xe0914f, sunGlare: 0xe0914f, sunLight: 0xe0914f },
{ t: 0.82, sky: 0x2a1f1f, cloud: 0x6d4a44, cloudShadow: 0x1c1b1f, sun: 0xc15c46, sunGlare: 0xa85f1d, sunLight: 0xd6b46a },
{ t: 0.92, sky: 0x1c1b1f, cloud: 0x54514f, cloudShadow: 0x100f12, sun: 0x54514f, sunGlare: 0x3a383d, sunLight: 0x54514f },
{ t: 1.00, sky: 0x100f12, cloud: 0x54514f, cloudShadow: 0x100f12, sun: 0x3a383d, sunGlare: 0x29282c, sunLight: 0x29282c }
];
function getColor(t) {
@@ -88,11 +91,14 @@
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)
cloudShadow: lerpColor(palette[i].cloudShadow, palette[i + 1].cloudShadow, s),
sun: lerpColor(palette[i].sun, palette[i + 1].sun, s),
sunGlare: lerpColor(palette[i].sunGlare, palette[i + 1].sunGlare, s),
sunLight: lerpColor(palette[i].sunLight, palette[i + 1].sunLight, s)
};
}
}
return { sky: palette[0].sky, cloud: palette[0].cloud, light: palette[0].light };
return { sky: palette[0].sky, cloud: palette[0].cloud, cloudShadow: palette[0].cloudShadow, sun: palette[0].sun, sunGlare: palette[0].sunGlare, sunLight: palette[0].sunLight };
}
var startTime = Date.now();
@@ -112,7 +118,10 @@
effect.setOptions({
skyColor: c.sky,
cloudColor: c.cloud,
lightColor: c.light
cloudShadowColor: c.cloudShadow,
sunColor: c.sun,
sunGlareColor: c.sunGlare,
sunlightColor: c.sunLight
});
clockEl.textContent = formatTime(t * 1440);
requestAnimationFrame(animate);