Sanctuary <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sanctuary</title> <style> /* Basic reset */ body, html { margin: 0; padding: 0; overflow: hidden; /* Prevent scrollbars */ height: 100%; /* Slightly darker overall background */ background-color: #233; font-family: 'Inter', sans-serif; /* Use Inter font */ } /* Style the canvas container */ #canvasContainer { position: relative; /* Needed for absolute positioning of canvas */ width: 100%; height: 100%; /* Take full height */ } /* Style the canvas to fill the container */ canvas { display: block; /* Remove extra space below canvas */ width: 100%; height: 100%; /* Background gradient for woods theme */ background: linear-gradient(to bottom, rgba(30, 60, 40, 0.85), rgba(15, 35, 20, 0.95)); /* Dark green/earthy gradient */ cursor: default; /* Default cursor */ position: absolute; /* Position relative to container */ top: 0; left: 0; } /* Style the audio toggle button (Unchanged) */ #audioButton { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); padding: 12px 25px; font-size: 16px; font-family: 'Inter', sans-serif; color: #fff; background-color: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; cursor: pointer; z-index: 20; transition: background-color 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.3); min-width: 180px; text-align: center; } #audioButton:hover { background-color: rgba(0, 0, 0, 0.7); box-shadow: 0 4px 8px rgba(0,0,0,0.4); } #audioButton:active { background-color: rgba(0, 0, 0, 0.8); box-shadow: 0 1px 3px rgba(0,0,0,0.5); } </style> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"> </head> <body> <div id="canvasContainer"> <canvas id="rainCanvas"></canvas> <button id="audioButton">Play Sound</button> </div> <script> const canvas = document.getElementById('rainCanvas'); const ctx = canvas.getContext('2d'); const audioButton = document.getElementById('audioButton'); // --- Animation Elements --- let raindrops = []; let fallingWords = []; let activeNumbers = []; // Holds the numbers currently falling in the *active batch* let animationFrameId; let animationLoopCounter = 0; // --- Sequential Number Batch State --- let currentDigit = 10; // The digit for the *next* batch to be created let isBatchActive = false; // Is a batch currently falling? // --- Word List (Unchanged) --- const positiveWords = [ "Hope", "Joy", "Love", "Peace", "Kind", "Brave", "Calm", "Shine", "Glow", "Dream", "Smile", "Happy", "Friend", "Light", "Grow", "Bloom", "Grace", "Trust", "Faith", "Unity", "Create", "Inspire", "Wonder", "Magic", "Cheer", "Bright", "Warm", "Gentle", "Strong", "Quiet", "Still", "Laugh", "Thrive", "Cherish", "Believe", "Achieve", "Courage", "Clarity", "Comfort", "Connect", "Delight", "Ease", "Energy", "Flow", "Forgive", "Freedom", "Generous", "Gratitude", "Harmony", "Heal", "Imagine", "Journey", "Listen", "Nourish", "Open", "Patience", "Present", "Purpose", "Reflect", "Renew", "Respect", "Serene", "Soothe", "Spark", "Support", "Thankful", "Tranquil", "Understand", "Value", "Vision", "Welcome", "Wisdom", "Zest", "Leaf", "Tree", "Forest", "Moss", "Fern", "Stream", "River", "Stone", "Earth", "Sky", "Sun", "Moon", "Star", "Cloud", "Wind", "Breeze", "Dew", "Mist", "Path", "Trail", "Root", "Branch", "Flower", "Seed", "Sprout", "Canopy", "Grove", "Meadow", "Wild", "Natural", "Ancient", "Deep", "Green", "Whisper", "Echo", "Silence", "Shelter", "Haven", "Sanctuary", "Alive", "Pure", "Fresh" ]; // --- Audio Variables (Unchanged) --- let audioContext; let noiseWorkletNode; let rainGainNode; let melodyIntervalId = null; let melodyNodes = {}; const noteSequence = [261.63, 293.66, 329.63, 392.00, 440.00, 523.25]; // C Major Pentatonic + Octave const noteIntervalSeconds = 6.5; const noteDurationSeconds = 1.5; const attackTime = 0.1; const releaseTime = 1.0; const echoDelaySeconds = 0.5; const echoFeedbackGain = 0.4; const melodyBaseVolume = 0.15; let isAudioSetup = false; let isAudioPlaying = false; // --- Audio Worklet Processor Code (Unchanged) --- const whiteNoiseProcessor = `class WhiteNoiseProcessor extends AudioWorkletProcessor{process(e,t){const s=t[0][0];for(let e=0;e<s.length;e++)s[e]=2*Math.random()-1;return!0}} registerProcessor("white-noise-processor",WhiteNoiseProcessor);`; // --- Raindrop Class (Unchanged) --- class Raindrop { constructor(x, y, length, speed, opacity) { this.x = x; this.y = y; this.length = length; this.speed = speed; this.opacity = opacity; } update() { this.y += this.speed; if (this.y > canvas.height + this.length) { this.reset(); } } draw() { if (!ctx || canvas.height <= 0) return; ctx.beginPath(); ctx.moveTo(this.x, this.y); ctx.lineTo(this.x, this.y + this.length); ctx.strokeStyle = `rgba(180, 200, 220, ${this.opacity * 0.9})`; ctx.lineWidth = 1.5; ctx.lineCap = 'round'; ctx.stroke(); } reset() { if (!canvas || canvas.width <= 0 || canvas.height <= 0) return; this.y = -this.length - Math.random() * 50; this.x = Math.random() * canvas.width; this.length = Math.random() * 15 + 5; this.speed = Math.random() * 4 + 2; this.opacity = Math.random() * 0.4 + 0.3; } } // --- Falling Word Class (Unchanged) --- class FallingWord { constructor(text, x, y, speed, fontSize, color) { this.text = text; this.x = x; this.y = y; this.speed = speed; this.fontSize = fontSize; this.color = color; } update() { this.y += this.speed; if (this.y > canvas.height + this.fontSize) { this.reset(); } } draw() { if (!ctx || canvas.height <= 0) return; ctx.font = `${this.fontSize}px 'Inter', sans-serif`; ctx.fillStyle = this.color; ctx.textAlign = 'center'; ctx.fillText(this.text, this.x, this.y); } reset() { if (!canvas || canvas.width <= 0 || canvas.height <= 0) return; this.text = positiveWords[Math.floor(Math.random() * positiveWords.length)]; this.y = -this.fontSize - Math.random() * 50; this.x = Math.random() * canvas.width; this.speed = Math.random() * 1.5 + 0.5; this.fontSize = Math.random() * 12 + 14; const hue = Math.random() * 120 + 60; const saturation = Math.random() * 20 + 40; const lightness = Math.random() * 15 + 65; const alpha = Math.random() * 0.3 + 0.6; this.color = `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`; } } // --- Falling Number Class (Unchanged) --- class FallingNumber { constructor(number, x, y, speed, fontSize, color) { this.number = number; this.x = x; this.y = y; this.speed = speed; this.fontSize = fontSize; this.color = color; } update() { this.y += this.speed; } draw() { if (!ctx || canvas.height <= 0) return; ctx.font = `bold ${this.fontSize}px 'Inter', sans-serif`; ctx.fillStyle = this.color; ctx.textAlign = 'center'; ctx.fillText(this.number.toString(), this.x, this.y); } isOffScreen() { return this.y > canvas.height + this.fontSize; } } // --- Initialize Audio Context and Nodes (Unchanged) --- async function setupAudio() { try{if(!audioContext)audioContext=new(window.AudioContext||window.webkitAudioContext);if(audioContext.state==="suspended")await audioContext.resume();if(!isAudioSetup){const e=new Blob([whiteNoiseProcessor],{type:"application/javascript"}),t=URL.createObjectURL(e);"running"!==audioContext.state&&await audioContext.resume(),await audioContext.audioWorklet.addModule(t),rainGainNode=audioContext.createGain(),rainGainNode.gain.setValueAtTime(.025,audioContext.currentTime),rainGainNode.connect(audioContext.destination),noiseWorkletNode=new AudioWorkletNode(audioContext,"white-noise-processor"),console.log("AudioWorkletNode for rain created."),melodyNodes.masterGain=audioContext.createGain(),melodyNodes.masterGain.gain.setValueAtTime(melodyBaseVolume,audioContext.currentTime),melodyNodes.masterGain.connect(audioContext.destination),melodyNodes.pannerLeft=audioContext.createStereoPanner(),melodyNodes.pannerLeft.pan.setValueAtTime(-.7,audioContext.currentTime),melodyNodes.pannerLeft.connect(melodyNodes.masterGain),melodyNodes.pannerRight=audioContext.createStereoPanner(),melodyNodes.pannerRight.pan.setValueAtTime(.7,audioContext.currentTime),melodyNodes.pannerRight.connect(melodyNodes.masterGain),melodyNodes.delay=audioContext.createDelay(2*echoDelaySeconds),melodyNodes.delay.delayTime.setValueAtTime(echoDelaySeconds,audioContext.currentTime),melodyNodes.feedback=audioContext.createGain(),melodyNodes.feedback.gain.setValueAtTime(echoFeedbackGain,audioContext.currentTime),melodyNodes.delay.connect(melodyNodes.feedback),melodyNodes.feedback.connect(melodyNodes.pannerRight),melodyNodes.feedback.connect(melodyNodes.delay),console.log("Melody and echo nodes created."),isAudioSetup=!0}return!0}catch(e){return console.error("Error setting up audio:",e),audioButton.textContent="Audio Error",audioButton.disabled=!0,!1} } // --- Play Single Melodic Note (Unchanged) --- function playMelodyNote() { if (!isAudioSetup || !audioContext || audioContext.state !== 'running') return; const randomIndex = Math.floor(Math.random() * noteSequence.length); const noteFrequency = noteSequence[randomIndex]; const now = audioContext.currentTime; const oscillator = audioContext.createOscillator(); oscillator.type = 'sine'; oscillator.frequency.setValueAtTime(noteFrequency, now); const noteGain = audioContext.createGain(); noteGain.gain.setValueAtTime(0, now); noteGain.gain.linearRampToValueAtTime(1.0, now + attackTime); noteGain.gain.linearRampToValueAtTime(0, now + noteDurationSeconds - 0.05); oscillator.connect(noteGain).connect(melodyNodes.pannerLeft); oscillator.connect(noteGain).connect(melodyNodes.delay); oscillator.start(now); oscillator.stop(now + noteDurationSeconds); console.log(`Playing random pentatonic note: ${noteFrequency.toFixed(2)} Hz`); setTimeout(() => { try { oscillator.disconnect(); noteGain.disconnect(); } catch (e) {} }, noteDurationSeconds * 1000 + 500); } // --- Start Audio Playback (Unchanged) --- function startAudio() { if(!isAudioSetup||!noiseWorkletNode||!rainGainNode)return void console.error("Audio not properly set up to start.");isAudioPlaying||("running"!==audioContext.state?audioContext.resume().then(()=>{console.log("Resumed context before starting audio."),noiseWorkletNode.connect(rainGainNode),playMelodyNote(),melodyIntervalId=setInterval(playMelodyNote,1e3*noteIntervalSeconds),isAudioPlaying=!0,audioButton.textContent="Stop Sound",console.log("Audio playing after resume.")}):(noiseWorkletNode.connect(rainGainNode),playMelodyNote(),melodyIntervalId=setInterval(playMelodyNote,1e3*noteIntervalSeconds),isAudioPlaying=!0,audioButton.textContent="Stop Sound",console.log("Audio playing."))); } // --- Stop Audio Playback (Unchanged) --- function stopAudio() { isAudioPlaying&&(noiseWorkletNode&&function(){try{noiseWorkletNode.disconnect(rainGainNode)}catch(e){console.warn("Error disconnecting noise node:",e)}}(),melodyIntervalId&&(clearInterval(melodyIntervalId),melodyIntervalId=null),isAudioPlaying=!1,audioButton.textContent="Play Sound",console.log("Audio stopped.")); } // --- Toggle Audio (Unchanged) --- async function toggleAudio() { if(!isAudioSetup){if(!await setupAudio())return}else audioContext&&"suspended"===audioContext.state&&(console.log("Resuming suspended audio context..."),await audioContext.resume(),console.log("Audio context resumed."));isAudioPlaying?stopAudio():isAudioSetup?startAudio():console.error("Cannot start audio, setup incomplete."); } // --- Initialization (Canvas - Unchanged) --- function initCanvas() { console.log(">>> initCanvas started"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; console.log(`Canvas size set directly to: ${canvas.width} x ${canvas.height}`); if (!ctx || canvas.width <= 0 || canvas.height <= 0) { console.error(`Canvas dimensions invalid: ${canvas.width}x${canvas.height}.`); return; } raindrops = []; const numberOfDrops = Math.max(50, Math.floor(canvas.width / 4)); console.log(`Creating ${numberOfDrops} raindrops.`); for (let i = 0; i < numberOfDrops; i++) { const x=Math.random()*canvas.width; const y=Math.random()*canvas.height-Math.random()*50; const length=Math.random()*15+5; const speed=Math.random()*4+2; const opacity=Math.random()*.4+.3; raindrops.push(new Raindrop(x, y, length, speed, opacity)); } console.log("Raindrops created."); fallingWords = []; const numberOfWords = Math.max(15, Math.floor(canvas.width / 50)); console.log(`Creating ${numberOfWords} falling words.`); for (let i = 0; i < numberOfWords; i++) { const word = positiveWords[Math.floor(Math.random() * positiveWords.length)]; const x = Math.random() * canvas.width; const y = Math.random() * canvas.height - Math.random() * 100; const speed = Math.random() * 1.5 + 0.5; const fontSize = Math.random() * 12 + 14; const tempWord = new FallingWord(word, x, y, speed, fontSize, 'white'); tempWord.reset(); fallingWords.push(tempWord); } console.log("Falling words created."); activeNumbers = []; currentDigit = 10; isBatchActive = false; console.log("Sequential number batch state initialized. Ready for digit 10."); if (!animationFrameId) { console.log(">>> Requesting animation frame NOW."); animate(); } else { console.log("Animation loop already running (id: " + animationFrameId + ")."); } console.log(">>> initCanvas finished"); } // --- Animation Loop (Unchanged) --- function animate() { if (!canvas || !ctx || canvas.width <= 0 || canvas.height <= 0) { console.error("Animation loop stopped: Canvas invalid."); animationFrameId = null; return; } ctx.clearRect(0, 0, canvas.width, canvas.height); try { raindrops.forEach(drop => { drop.update(); drop.draw(); }); fallingWords.forEach(word => { word.update(); word.draw(); }); if (isBatchActive) { activeNumbers.forEach(num => { num.update(); num.draw(); }); activeNumbers = activeNumbers.filter(num => !num.isOffScreen()); if (activeNumbers.length === 0) { console.log(`Batch for digit ${currentDigit} finished.`); isBatchActive = false; currentDigit--; if (currentDigit < 1) { currentDigit = 10; } console.log(`Ready for next batch (digit: ${currentDigit}).`); } } else { console.log(`Creating batch for digit ${currentDigit}.`); activeNumbers = []; for (let i = 0; i < currentDigit; i++) { const x = Math.random() * canvas.width; const y = -(Math.random() * 10 + 16) - Math.random() * 80; const speed = Math.random() * 1.5 + 0.6; const fontSize = Math.random() * 10 + 16; const hue = Math.random() * 100 + 180; const saturation = Math.random() * 30 + 50; const lightness = Math.random() * 15 + 70; const alpha = Math.random() * 0.2 + 0.7; const color = `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`; activeNumbers.push(new FallingNumber(currentDigit, x, y, speed, fontSize, color)); } isBatchActive = true; console.log(`Batch of ${activeNumbers.length} numbers started.`); } } catch(e) { console.error("Error during element update/draw:", e); cancelAnimationFrame(animationFrameId); animationFrameId = null; return; } animationLoopCounter++; if (animationLoopCounter === 1) { console.log(">>> Animation loop first frame."); } animationFrameId = requestAnimationFrame(animate); } // --- Event Listeners (Unchanged) --- window.addEventListener('resize', () => { console.log("Window resize detected."); clearTimeout(window.resizeTimeout); window.resizeTimeout = setTimeout(() => { console.log("Processing resize..."); if (animationFrameId) { cancelAnimationFrame(animationFrameId); animationFrameId = null; console.log("Cancelled animation frame for resize."); } initCanvas(); }, 150); }); audioButton.addEventListener('click', toggleAudio); window.addEventListener('load', () => { console.log(">>> Window 'load' event fired."); initCanvas(); }); </script> </body> </html> Sanctuary
