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

Test clouds2 effect with day cycle

Browse Source
This commit is contained in:
Richard Zink committed 2026-10-07 07:05:53 +02:00
1 parent f5d799e398
commit da8e7e09b5
1 file changed
+18 -27
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+18 -27
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vanta Clouds</title> <title>Vanta Clouds2</title>
<style> <style>
html, body { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; } html, body { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; }
#vanta { width: 100vw; height: 100vh; } #vanta { width: 100vw; height: 100vh; }
@@ -17,7 +17,7 @@
background: rgba(28, 27, 31, 0.5); background: rgba(28, 27, 31, 0.5);
padding: 8px 14px; padding: 8px 14px;
border-radius: 6px; border-radius: 6px;
z-index: 10; z-index: +10;
letter-spacing: 1px; letter-spacing: 1px;
} }
</style> </style>
@@ -26,7 +26,7 @@
<div id="vanta"></div> <div id="vanta"></div>
<div id="clock">00:00</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://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@0.5.21/dist/vanta.clouds.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.clouds2.min.js"></script>
<script> <script>
var effect = VANTA.CLOUDS({ var effect = VANTA.CLOUDS({
el: "#vanta", el: "#vanta",
@@ -42,10 +42,7 @@
backgroundAlpha: 1, backgroundAlpha: 1,
skyColor: 0x1c1b1f, skyColor: 0x1c1b1f,
cloudColor: 0x6d6a63, cloudColor: 0x6d6a63,
cloudShadowColor: 0x100f12, lightColor: 0xe6dfd1
sunColor: 0xe0914f,
sunGlareColor: 0xc15c46,
sunlightColor: 0xd6b46a
}); });
function hexToRgb(h) { function hexToRgb(h) {
@@ -68,17 +65,17 @@
var CYCLE = 20000; var CYCLE = 20000;
var palette = [ var palette = [
{ t: 0.00, sky: 0x100f12, cloud: 0x54514f, cloudShadow: 0x100f12, sun: 0x3a383d, sunGlare: 0x29282c, sunLight: 0x29282c }, { t: 0.00, sky: 0x100f12, cloud: 0x54514f, light: 0x3a383d },
{ t: 0.08, sky: 0x1c1b1f, cloud: 0x54514f, cloudShadow: 0x100f12, sun: 0x4a4855, sunGlare: 0x3a383d, sunLight: 0x54514f }, { t: 0.08, sky: 0x1c1b1f, cloud: 0x54514f, light: 0x4a4855 },
{ t: 0.18, sky: 0x2a2429, cloud: 0x6d5a4f, cloudShadow: 0x1c1b1f, sun: 0xa85f1d, sunGlare: 0xc56a2b, sunLight: 0xd6b46a }, { t: 0.18, sky: 0x2a2429, cloud: 0x6d5a4f, light: 0xa85f1d },
{ t: 0.28, sky: 0x4a3528, cloud: 0x8a6a5a, cloudShadow: 0x29282c, sun: 0xe0914f, sunGlare: 0xe0914f, sunLight: 0xe0914f }, { t: 0.28, sky: 0x4a3528, cloud: 0x8a6a5a, light: 0xd6b46a },
{ t: 0.40, sky: 0x4a3a30, cloud: 0x999187, cloudShadow: 0x54514f, sun: 0xe6dfd1, sunGlare: 0xe0914f, sunLight: 0xf3ede1 }, { t: 0.40, sky: 0x4a3a30, cloud: 0x999187, light: 0xe0914f },
{ t: 0.50, sky: 0x54514f, cloud: 0xb0a89a, cloudShadow: 0x54514f, sun: 0xf3ede1, sunGlare: 0xe6dfd1, sunLight: 0xf3ede1 }, { t: 0.50, sky: 0x54514f, cloud: 0xb0a89a, light: 0xf3ede1 },
{ t: 0.60, sky: 0x4a4540, cloud: 0xa59a89, cloudShadow: 0x54514f, sun: 0xe6dfd1, sunGlare: 0xe0914f, sunLight: 0xe6dfd1 }, { t: 0.60, sky: 0x4a4540, cloud: 0xa59a89, light: 0xe6dfd1 },
{ t: 0.70, sky: 0x3a2a22, cloud: 0x8a6a5a, cloudShadow: 0x29282c, sun: 0xe0914f, sunGlare: 0xe0914f, sunLight: 0xe0914f }, { t: 0.70, sky: 0x3a2a22, cloud: 0x8a6a5a, light: 0xe0914f },
{ t: 0.82, sky: 0x2a1f1f, cloud: 0x6d4a44, cloudShadow: 0x1c1b1f, sun: 0xc15c46, sunGlare: 0xa85f1d, sunLight: 0xd6b46a }, { t: 0.82, sky: 0x2a1f1f, cloud: 0x6d4a44, light: 0xc15c46 },
{ t: 0.92, sky: 0x1c1b1f, cloud: 0x54514f, cloudShadow: 0x100f12, sun: 0x54514f, sunGlare: 0x3a383d, sunLight: 0x54514f }, { t: 0.92, sky: 0x1c1b1f, cloud: 0x54514f, light: 0x54514f },
{ t: 1.00, sky: 0x100f12, cloud: 0x54514f, cloudShadow: 0x100f12, sun: 0x3a383d, sunGlare: 0x29282c, sunLight: 0x29282c } { t: 1.00, sky: 0x100f12, cloud: 0x54514f, light: 0x3a383d }
]; ];
function getColor(t) { function getColor(t) {
@@ -91,14 +88,11 @@
return { return {
sky: lerpColor(palette[i].sky, palette[i + 1].sky, s), sky: lerpColor(palette[i].sky, palette[i + 1].sky, s),
cloud: lerpColor(palette[i].cloud, palette[i + 1].cloud, s), cloud: lerpColor(palette[i].cloud, palette[i + 1].cloud, s),
cloudShadow: lerpColor(palette[i].cloudShadow, palette[i + 1].cloudShadow, s), light: lerpColor(palette[i].light, palette[i + 1].light, 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, cloudShadow: palette[0].cloudShadow, sun: palette[0].sun, sunGlare: palette[0].sunGlare, sunLight: palette[0].sunLight }; return { sky: palette[0].sky, cloud: palette[0].cloud, light: palette[0].light };
} }
var startTime = Date.now(); var startTime = Date.now();
@@ -118,10 +112,7 @@
effect.setOptions({ effect.setOptions({
skyColor: c.sky, skyColor: c.sky,
cloudColor: c.cloud, cloudColor: c.cloud,
cloudShadowColor: c.cloudShadow, lightColor: c.light
sunColor: c.sun,
sunGlareColor: c.sunGlare,
sunlightColor: c.sunLight
}); });
clockEl.textContent = formatTime(t * 1440); clockEl.textContent = formatTime(t * 1440);
requestAnimationFrame(animate); requestAnimationFrame(animate);