AI Wave Function Simulator - Physics Interference Visualization Explore wave interference physics!

function setup() {
  createCanvas(windowWidth, windowHeight);
  pixelDensity(1); // make per-pixel math predictable

  createFieldGraphics();
  initSources();
  setupUI();

  timeSec = 0;
  lastMillis = millis();
}

function draw() {
  updateTime();

  // Update frequency from slider
  if (frequencySlider) {
    frequency = parseFloat(frequencySlider.value());
    if (frequencyLabelSpan) {
      frequencyLabelSpan.html(nf(frequency, 1, 2) + ' Hz');
    }
  }

  background(0);

  renderField();          // compute interference pattern
  image(fieldG, 0, 0, width, height); // scale buffer onto canvas

  drawSources();
}

function createFieldGraphics() {
  const gWidth = max(1, floor(width / fieldScale));
  const gHeight = max(1, floor(height / fieldScale));
  fieldG = createGraphics(gWidth, gHeight);
  fieldG.pixelDensity(1);
}

function initSources() {
  const midY = height * 0.5;
  const spacing = width * 0.18;
  const centerX = width * 0.5;

  source1 = {
    x: centerX - spacing,
    y: midY,
    isDragging: false,
    offsetX: 0,
    offsetY: 0
  };

  source2 = {
    x: centerX + spacing,
    y: midY,
    isDragging: false,
    offsetX: 0,
    offsetY: 0
  };
}

function setupUI() {
  const panel = select('#controls');
  if (!panel) return;

  // Frequency row
  const freqRow = createDiv();
  freqRow.parent(panel);
  freqRow.addClass('control-row');

  const freqLabel = createSpan('Frequency');
  freqLabel.parent(freqRow);
  freqLabel.addClass('label');

  // createSlider: https://p5js.org/reference/#/p5/createSlider
  frequencySlider = createSlider(minFrequency, maxFrequency, defaultFrequency, 0.01);
  frequencySlider.parent(freqRow);

  frequencyLabelSpan = createSpan(nf(defaultFrequency, 1, 2) + ' Hz');
  frequencyLabelSpan.parent(freqRow);

  // Play / Pause button
  const buttonRow = createDiv();
  buttonRow.parent(panel);
  buttonRow.addClass('control-row');

  // createButton: https://p5js.org/reference/#/p5/createButton
  playPauseButton = createButton('Pause');
  playPauseButton.parent(buttonRow);
  playPauseButton.mousePressed(togglePlayPause);
}

function updateTime() {
  const now = millis();
  if (isPlaying) {
    const dt = (now - lastMillis) / 1000.0;
    timeSec += dt;
  }
  lastMillis = now;
}

function togglePlayPause() {
  isPlaying = !isPlaying;
  if (playPauseButton) {
    playPauseButton.html(isPlaying ? 'Pause' : 'Play');
  }
}

function renderField() {
  if (!fieldG) return;

  const g = fieldG;
  g.loadPixels(); // https://p5js.org/reference/#/p5.Image/loadPixels

  const gw = g.width;
  const gh = g.height;

  const simW = width;
  const simH = height;

  const omega = TWO_PI * frequency;      // angular frequency
  const k = TWO_PI / wavelength;         // wave number
  const maxAmp = 2.0;                    // max |A| for two unit waves

  for (let y = 0; y < gh; y++) {
    const vy = ((y + 0.5) / gh) * simH;

    for (let x = 0; x < gw; x++) {
      const vx = ((x + 0.5) / gw) * simW;

      // Distance to source 1
      const dx1 = vx - source1.x;
      const dy1 = vy - source1.y;
      const d1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);

      // Distance to source 2
      const dx2 = vx - source2.x;
      const dy2 = vy - source2.y;
      const d2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);

      // Phase = k * distance - omega * t
      const phase1 = k * d1 - omega * timeSec;
      const phase2 = k * d2 - omega * timeSec;

      // Wave amplitudes from each source
      const a1 = Math.sin(phase1);
      const a2 = Math.sin(phase2);

      // Combined amplitude (interference)
      const A = a1 + a2;
      const ampAbs = Math.abs(A);

      // Map |A| from 0..maxAmp to brightness 0..1
      const b = constrain(ampAbs / maxAmp, 0, 1);
      const blue = b * 255;

      const idx = 4 * (y * gw + x);
      g.pixels[idx + 0] = 0;        // R
      g.pixels[idx + 1] = 0;        // G
      g.pixels[idx + 2] = blue;     // B
      g.pixels[idx + 3] = 255;      // A
    }
  }

  g.updatePixels(); // https://p5js.org/reference/#/p5.Image/updatePixels
}

function drawSources() {
  stroke(255);
  strokeWeight(2);
  fill(80, 160, 255, 200);

  const d = sourceRadius * 2;
  ellipse(source1.x, source1.y, d, d);
  ellipse(source2.x, source2.y, d, d);

  noStroke();
  fill(255);
  textAlign(CENTER, CENTER);
  textSize(12);
  text('A', source1.x, source1.y);
  text('B', source2.x, source2.y);
}

function mousePressed() {
  if (!insideCanvas(mouseX, mouseY)) return;

  const d1 = dist(mouseX, mouseY, source1.x, source1.y);
  const d2 = dist(mouseX, mouseY, source2.x, source2.y);

  if (d1 <= sourceRadius + 6) {
    source1.isDragging = true;
    source1.offsetX = mouseX - source1.x;
    source1.offsetY = mouseY - source1.y;
  } else if (d2 <= sourceRadius + 6) {
    source2.isDragging = true;
    source2.offsetX = mouseX - source2.x;
    source2.offsetY = mouseY - source2.y;
  }
}

function mouseDragged() {
  if (!insideCanvas(mouseX, mouseY)) return;

  if (source1.isDragging) {
    source1.x = constrain(mouseX - source1.offsetX, 0, width);
    source1.y = constrain(mouseY - source1.offsetY, 0, height);
  } else if (source2.isDragging) {
    source2.x = constrain(mouseX - source2.offsetX, 0, width);
    source2.y = constrain(mouseY - source2.offsetY, 0, height);
  }
}

function mouseReleased() {
  source1.isDragging = false;
  source2.isDragging = false;
}

function insideCanvas(x, y) {
  return x >= 0 && x <= width && y >= 0 && y <= height;
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  pixelDensity(1);
  createFieldGraphics();
}