AI Magnetic Field Lines - Iron Filings Physics Visualization - xelsed.ai

  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.strength = random(5000, 15000); // Magnitude of the pole's influence
    this.polarity = random([-1, 1]);    // -1 for 'south' (field towards), 1 for 'north' (field away)
    
    // Perlin noise offsets for a natural, non-repeating drift
    this.noiseOffsetX = random(1000);
    this.noiseOffsetY = random(1000);
    this.noiseStep = 0.005; // How quickly the pole's noise offset changes
    this.driftMagnitude = 1; // Maximum amount the pole drifts per frame
  }

  update() {
    // Map Perlin noise values (0 to 1) to a drift range (-driftMagnitude to driftMagnitude)
    this.x += map(noise(this.noiseOffsetX), 0, 1, -this.driftMagnitude, this.driftMagnitude);
    this.y += map(noise(this.noiseOffsetY), 0, 1, -this.driftMagnitude, this.driftMagnitude);

    // Increment noise offsets for the next frame
    this.noiseOffsetX += this.noiseStep;
    this.noiseOffsetY += this.noiseStep;
  }

  getFieldVector(px, py) {
    let dx = px - this.x;
    let dy = py - this.y;
    let dist = sqrt(dx * dx + dy * dy); // Distance from the pole to the point

    // Cap distance to avoid excessively strong fields (division by zero or huge numbers)
    // right at the pole's location, making the simulation more stable.
    dist = max(dist, 10); 

    let angle = atan2(dy, dx); // Angle from pole to point
    let fieldMagnitude = this.strength / (dist * dist); // Inverse square law for strength

    // Direction depends on polarity:
    // Polarity 1 (north): Field points away from the pole
    // Polarity -1 (south): Field points towards the pole
    let fieldX = fieldMagnitude * cos(angle) * this.polarity;
    let fieldY = fieldMagnitude * sin(angle) * this.polarity;

    return { x: fieldX, y: fieldY, magnitude: fieldMagnitude };
  }

  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.length = random(10, 25); // Small line segment length for "filing" effect
    this.angle = 0;             // Current orientation of the line
    this.fieldStrength = 0;     // Stores the magnitude of the magnetic field at this line's position

    // Perlin noise offset for line position drift
    this.noiseOffset = random(1000);
    this.noiseStep = 0.01;     // How quickly the line's noise offset changes
    this.driftMagnitude = 0.5; // Maximum amount the line drifts per frame
  }

  update(poles) {
    let combinedFieldX = 0;
    let combinedFieldY = 0;

    // Sum the field vectors from all poles at this line's position
    for (let pole of poles) {
      let field = pole.getFieldVector(this.x, this.y);
      combinedFieldX += field.x;
      combinedFieldY += field.y;
    }

    // Calculate the magnitude of the combined field vector
    this.fieldStrength = sqrt(combinedFieldX * combinedFieldX + combinedFieldY * combinedFieldY);

    // Update the global maxFieldStrength for accurate color scaling
    maxFieldStrength = max(maxFieldStrength, this.fieldStrength);

    // Set the line's angle to match the direction of the combined magnetic field
    this.angle = atan2(combinedFieldY, combinedFieldX);

    // Apply Perlin noise-based drift to the line's position
    this.x += map(noise(this.noiseOffset), 0, 1, -this.driftMagnitude, this.driftMagnitude);
    this.y += map(noise(this.noiseOffset + 100), 0, 1, -this.driftMagnitude, this.driftMagnitude);

    this.noiseOffset += this.noiseStep;

    // Wrap the line around the canvas edges to keep it visible
    this.x = (this.x + width) % width;
    this.y = (this.y + height) % height;
  }

  display() {
    strokeWeight(1);
    
    // Map field strength to brightness and alpha for visual effect
    // Stronger fields result in brighter, slightly more opaque lines.
    let brightness = map(this.fieldStrength, 0, maxFieldStrength, 50, 255);
    let alpha = map(this.fieldStrength, 0, maxFieldStrength, 10, 150); // Low alpha for subtle, "ghostly" effect

    stroke(brightness, alpha);
    
    push(); // Save current drawing state
    translate(this.x, this.y); // Move to the line's center
    rotate(this.angle);       // Rotate to align with the magnetic field
    line(-this.length / 2, 0, this.length / 2, 0); // Draw the line segment
    pop();  // Restore previous drawing state
  }

function setup() {
  createCanvas(windowWidth, windowHeight);
  angleMode(RADIANS); // Use radians for angle calculations
  background(0);    // Dark background

  // Create 2-3 initial magnetic poles at random positions
  for (let i = 0; i < 3; i++) {
    poles.push(new MagneticPole(random(width), random(height)));
  }

  // Create the magnetic line segments at random positions
  for (let i = 0; i < numLines; i++) {
    lines.push(new MagneticLine(random(width), random(height)));
  }
}

function draw() {
  // Use a low-alpha background to create a subtle "trail" or persistence effect
  background(0, 50); 

  // Reset maxFieldStrength each frame. This is crucial for the map() function
  // to correctly scale line brightness/alpha based on the *current* strongest
  // field, adapting as poles move.
  maxFieldStrength = 0.01; 

  // Update all magnetic poles (drift their positions)
  for (let pole of poles) {
    pole.update();
  }

  // Update all magnetic lines (re-align to field, drift their positions)
  for (let line of lines) {
    line.update(poles);
  }

  // Display all magnetic lines
  for (let line of lines) {
    line.display();
  }
}

function mousePressed() {
  // Add a new magnetic pole at the mouse click location
  poles.push(new MagneticPole(mouseX, mouseY));
  
  // Add some new lines around the new pole to immediately visualize its field
  for (let i = 0; i < 50; i++) {
    let x = mouseX + random(-50, 50);
    let y = mouseY + random(-50, 50);
    lines.push(new MagneticLine(x, y));
  }
  
  // If the total number of lines exceeds a threshold, remove the oldest ones
  // to maintain performance, especially if many poles are added.
  if (lines.length > numLines * 1.5) { 
    lines.splice(0, lines.length - numLines);
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  background(0); // Clear the canvas on resize
  
  // Re-generate all lines to place them randomly across the new canvas size
  lines = [];
  for (let i = 0; i < numLines; i++) {
    lines.push(new MagneticLine(random(width), random(height)));
  }
}