fix: improve foam particle generation and prevent memory leaks in sky gradient buffer

Author: brylie

src/animations/README.md

@@ -408,7 +408,7 @@ describe('OceanWaves', () => {
 
 ## File Naming Conventions
 
-```
+```text
 oceanWaves.ts         # Business logic utilities
 oceanWaves.test.ts    # Unit tests for utilities
 OceanWaves.svelte     # Svelte component (PascalCase)

src/animations/oceanWaves.test.ts

@@ -281,9 +281,9 @@ describe('getFoamColor', () => {
 
 describe('generateFoamParticles', () => {
   // Mock Perlin noise function with predictable values
-  const mockNoise = (x: number, y: number, z?: number): number => {
+  const mockNoise = (x: number, y: number, z: number): number => {
     // Simple deterministic function for testing
-    return (Math.sin(x * 10 + (y || 0) * 5 + (z || 0)) + 1) / 2; // Returns 0-1
+    return (Math.sin(x * 10 + y * 5 + z) + 1) / 2; // Returns 0-1
   };
 
   test('returns array of foam particles', () => {

src/animations/oceanWaves.ts

@@ -313,15 +313,17 @@ export function generateFoamParticles(
     const offsetY =
       (noiseFunc(
         x * FOAM_NOISE_X_SCALE + particle * FOAM_NOISE_Y_OFFSET,
-        time * FOAM_NOISE_TIME_SCALE
+        time * FOAM_NOISE_TIME_SCALE,
+        layer * FOAM_NOISE_LAYER_OFFSET + particle
       ) - 0.5) * FOAM_VERTICAL_SPREAD;
 
     // Vary particle size (small particles)
     const size =
       FOAM_MIN_SIZE +
       noiseFunc(
         particle * FOAM_NOISE_SIZE_OFFSET,
-        time * FOAM_NOISE_SIZE_TIME_SCALE
+        time * FOAM_NOISE_SIZE_TIME_SCALE,
+        layer * FOAM_NOISE_LAYER_OFFSET
       ) * FOAM_MAX_SIZE_VARIATION;
 
     // Create dissipation effect - particles further from center fade more

src/components/apps/OceanWaves.svelte

@@ -184,6 +184,11 @@
 
       // Create sky gradient as off-screen buffer (called once and on resize)
       function createSkyGradient(p: p5, w: number, h: number) {
+        // Clean up existing buffer to prevent memory leaks
+        if (skyGradientBuffer) {
+          skyGradientBuffer.remove();
+          skyGradientBuffer = null;
+        }
         skyGradientBuffer = p.createGraphics(w, h);
 
         // Create colors once outside the loop