Perlin-Noise Magnetic Field Topology

1. Initialize 5 magnetic poles with varying strengths, noise offsets, and phases for temporal animation
2. Calculate dipole field contribution from each pole with time-modulated strength
3. Layer Perlin noise at multiple scales to create curved, organic field topology
4. Update particle velocity through field force with smooth integration and damping
5. Map particle hue to velocity magnitude to visualize field strength topology
6. Render vector field overlay showing local field direction and magnitude as subtle indicators
7. Implement torus topology wrapping for continuous field line visualization across canvas edges

var sketch = function(p) {
    var particles = [];
    var poles = [];
    var resolution = 18;
    var time = 0;
    var cols, rows;
    
    p.setup = function() {
        var container = document.getElementById('p5-wrapper');
        p.createCanvas(container.offsetWidth, container.offsetHeight).parent(container);
        p.colorMode(p.HSB, 360, 100, 100, 255);
        p.background(20, 30, 8);
        
        cols = Math.floor(p.width / resolution) + 1;
        rows = Math.floor(p.height / resolution) + 1;
        
        // Initialize magnetic poles with varying strengths and noise offsets
        for (var i = 0; i < 5; i++) {
            poles.push({
                x: p.random(p.width),
                y: p.random(p.height),
                strength: p.random(-1.5, 1.5),
                noiseOffsetX: p.random(10000),
                noiseOffsetY: p.random(10000),
                phase: p.random(p.TWO_PI)
            });
        }
        
        // Create trace particles following the magnetic field topology
        for (var i = 0; i < 600; i++) {
            particles.push(createParticle());
        }
    };
    
    function createParticle() {
        return {
            x: p.random(p.width),
            y: p.random(p.height),
            vx: 0,
            vy: 0,
            life: p.random(80, 250),
            maxLife: 250,
            hueOffset: p.random(360)
        };
    }
    
    function calculateField(x, y, t) {
        var fx = 0;
        var fy = 0;
        
        // Sum contributions from all magnetic poles with Perlin noise modulation
        for (var i = 0; i < poles.length; i++) {
            var pole = poles[i];
            
            // Animate pole position using layered Perlin noise
            var noiseX = p.noise(pole.noiseOffsetX + t * 0.008) * 2 - 1;
            var noiseY = p.noise(pole.noiseOffsetY + t * 0.008) * 2 - 1;
            var poleX = pole.x + noiseX * 80;
            var poleY = pole.y + noiseY * 80;
            
            var dx = x - poleX;
            var dy = y - poleY;
            var distSq = dx * dx + dy * dy;
            var dist = Math.sqrt(distSq);
            dist = Math.max(dist, 40);
            
            // Dipole field calculation with time-varying strength
            var strengthMod = 1 + 0.3 * p.sin(t * 0.02 + pole.phase);
            var forceMag = pole.strength * strengthMod * 600 / (dist * dist);
            
            fx += forceMag * dx / dist;
            fy += forceMag * dy / dist;
        }
        
        // Apply Perlin noise for field line curvature and topological complexity
        var noiseScale = 0.004;
        var noiseAngle = p.noise(x * noiseScale, y * noiseScale, t * 0.015) * p.TWO_PI * 3;
        var noiseMag = 1.8;
        fx += p.cos(noiseAngle) * noiseMag;
        fy += p.sin(noiseAngle) * noiseMag;
        
        return { fx: fx, fy: fy };
    }
    
    p.draw = function() {
        // Trail effect for smooth field line visualization
        p.noStroke();
        p.fill(20, 30, 8, 40);
        p.rect(0, 0, p.width, p.height);
        
        var t = p.frameCount;
        
        // Update and render particles following magnetic field topology
        for (var i = 0; i < particles.length; i++) {
            var part = particles[i];
            
            // Calculate noise-modulated magnetic field at particle position
            var field = calculateField(part.x, part.y, t);
            
            // Smooth velocity integration with damping
            part.vx = part.vx * 0.92 + field.fx * 0.08;
            part.vy = part.vy * 0.92 + field.fy * 0.08;
            
            // Clamp velocity for stable particle behavior
            var speed = Math.sqrt(part.vx * part.vx + part.vy * part.vy);
            var maxSpeed = 4.5;
            if (speed > maxSpeed) {
                part.vx = (part.vx / speed) * maxSpeed;
                part.vy = (part.vy / speed) * maxSpeed;
            }
            
            // Update position with torus topology (wrapping edges)
            part.x += part.vx;
            part.y += part.vy;
            
            part.x = ((part.x % p.width) + p.width) % p.width;
            part.y = ((part.y % p.height) + p.height) % p.height;
            
            // Particle lifecycle management
            part.life--;
            if (part.life <= 0) {
                particles[i] = createParticle();
                continue;
            }
            
            // Color mapping based on velocity for field strength visualization
            var lifeRatio = part.life / part.maxLife;
            var speedNorm = p.map(speed, 0, maxSpeed, 0, 1);
            
            var hue = (part.hueOffset + speedNorm * 120 + t * 0.5) % 360;
            var saturation = 65 + speedNorm * 35;
            var brightness = 70 + speedNorm * 30;
            var alpha = lifeRatio * 200;
            
            // Render particle as glowing point with motion blur effect
            p.fill(hue, saturation, brightness, alpha);
            p.ellipse(part.x, part.y, 2.5, 2.5);
            
            // Motion trail for enhanced field line visibility
            if (speed > 0.5) {
                p.fill(hue, saturation, brightness, alpha * 0.3);
                p.ellipse(part.x - part.vx * 2, part.y - part.vy * 2, 1.5, 1.5);
            }
        }
        
        // Render vector field overlay showing local field direction
        p.strokeWeight(1);
        for (var gx = 0; gx < cols; gx++) {
            for (var gy = 0; gy < rows; gy++) {
                var gridX = gx * resolution;
                var gridY = gy * resolution;
                
                var field = calculateField(gridX, gridY, t);
                var angle = p.atan2(field.fy, field.fx);
                
                // Subtle field direction indicators
                var magnitude = Math.sqrt(field.fx * field.fx + field.fy * field.fy);
                var normMag = p.map(magnitude, 0, 3, 0, 1);
                
                var alpha = 15 + normMag * 30;
                p.stroke(200, 20, 100, alpha);
                
                var len = 8 + normMag * 6;
                p.line(
                    gridX - p.cos(angle) * len,
                    gridY - p.sin(angle) * len,
                    gridX + p.cos(angle) * len,
                    gridY + p.sin(angle) * len
                );
            }
        }
        
        time += 1;
    };
    
    p.windowResized = function() {
        var container = document.getElementById('p5-wrapper');
        p.resizeCanvas(container.offsetWidth, container.offsetHeight);
        cols = Math.floor(p.width / resolution) + 1;
        rows = Math.floor(p.height / resolution) + 1;
        p.background(20, 30, 8);
    };
};
// p5 init stripped