diff options
Diffstat (limited to 'site/themes/hugo-starter/static/js/background.js')
| -rw-r--r-- | site/themes/hugo-starter/static/js/background.js | 82 |
1 files changed, 0 insertions, 82 deletions
diff --git a/site/themes/hugo-starter/static/js/background.js b/site/themes/hugo-starter/static/js/background.js deleted file mode 100644 index e9b61a2..0000000 --- a/site/themes/hugo-starter/static/js/background.js +++ /dev/null @@ -1,82 +0,0 @@ -document.addEventListener("DOMContentLoaded", () => { - const canvas = document.getElementById("background"); - if (!canvas) return; - const ctx = canvas.getContext("2d"); - - // Grab config from the embedded <script> - const configEl = document.getElementById("background-config"); - const config = configEl ? JSON.parse(configEl.textContent) : {}; - - // Use config values with defaults as fallback - const spacing = config.spacing ?? 24; - const maxRadius = config.maxRadius ?? 8; - const baseOffset = config.baseOffset ?? 120; - const freq = config.freq ?? 0.008; - const speed = config.speed ?? 0.02; - - const baseAmp = config.baseAmp ?? 100; - const env1Freq = config.envelope1Freq ?? 0.002; - const env1Amp = config.envelope1Amp ?? 120; - const env2Freq = config.envelope2Freq ?? 0.0005; - const env2Amp = config.envelope2Amp ?? 200; - - let t = parseFloat(localStorage.getItem("waveProgress")) || 0; - let widthCss = window.innerWidth; - let heightCss = window.innerHeight; - let pixelRatio = window.devicePixelRatio || 1; - - function resize() { - widthCss = window.innerWidth; - heightCss = window.innerHeight; - pixelRatio = window.devicePixelRatio || 1; - - canvas.width = Math.floor(widthCss * pixelRatio); - canvas.height = Math.floor(heightCss * pixelRatio); - canvas.style.width = widthCss + "px"; - canvas.style.height = heightCss + "px"; - ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0); - } - window.addEventListener("resize", resize); - resize(); - - function draw() { - const styles = getComputedStyle(document.documentElement); - const fg = styles.getPropertyValue("--fg").trim(); - - ctx.clearRect(0, 0, widthCss, heightCss); - ctx.fillStyle = fg; - - for (let x = 0; x <= widthCss + spacing; x += spacing) { - // envelope: controls crest variance - const envelope = - baseAmp - + Math.sin(x * env1Freq + t * 0.1) * env1Amp - + Math.sin(x * env2Freq + t * 0.05) * env2Amp; - - const waveY = heightCss - (Math.sin(x * freq + t) * envelope + baseOffset); - // const waveY = Math.max(heightCss - 50, heightCss - (Math.sin(x * freq + t) * envelope + baseOffset)); - - for (let y = heightCss; y >= 0; y -= spacing) { - const dist = Math.max(0, y - waveY); - const radius = Math.min(maxRadius, dist / 40); - if (radius > 0.2) { - ctx.beginPath(); - // ctx.arc(x + spacing / 2, y - spacing / 2, radius, 0, Math.PI * 2); - ctx.fillRect( - x + spacing / 2 - radius, - y - spacing / 2 - radius, - radius * 2, - radius * 2 - ); - ctx.fill(); - } - } - } - - t += speed; - localStorage.setItem("waveProgress", t); - requestAnimationFrame(draw); - } - - draw(); -}); |
