AI Sound Wave Terrain - Interactive Frequency Mesh Visualization - xelsed.ai

function setup() {
  // Create full-window canvas (ref: https://p5js.org/reference/#/p5/createCanvas)
  createCanvas(windowWidth, windowHeight);
  noCursor();

  // Define base colors (ref: https://p5js.org/reference/#/p5/color)
  colDeepBlue   = color(8, 30, 90);    // deep valley blue
  colBlueGreen  = color(40, 170, 200); // mid low cyan/green
  colYellow     = color(255, 230, 120); // mid-high yellow
  colRedOrange  = color(255, 80, 20);   // peak orange/red
}

function draw() {
  background(8, 8, 20); // dark night sky

  // Time variable for smooth animation
  const t = frameCount * 0.015;

  // Mouse-driven controls (ref: https://p5js.org/reference/#/p5/map)
  const mx = constrain(mouseX, 0, width);
  const my = constrain(mouseY, 0, height);

  // Primary spatial frequency: left = low, right = high
  const primaryFreq = map(mx, 0, width, 0.6, 2.5);

  // Amplitude: top = small waves, bottom = big mountains
  const amplitude = map(my, 0, height, 40, 220);

  // Precompute positions & heights for this frame
  const positions = new Array(ROWS);
  const heights = new Array(ROWS);

  for (let r = 0; r < ROWS; r++) {
    positions[r] = new Array(COLS);
    heights[r] = new Array(COLS);

    // Depth from front (0) to back (1)
    const depth = r / (ROWS - 1);

    // Perspective scaling: near rows appear wider, far rows narrower
    const perspective = lerp(2.0, 0.6, depth);

    // Base vertical position: near rows lower on screen, far rows higher
    const yBase = lerp(height * 0.9, height * 0.2, depth);

    for (let c = 0; c < COLS; c++) {
      // Normalized coordinates in "world space"
      const u = c / (COLS - 1) - 0.5; // -0.5 .. 0.5 horizontally
      const v = depth;                // 0 .. 1 in depth

      // Height from overlapping sine waves
      const h = computeHeight(u, v, t, primaryFreq, amplitude);
      heights[r][c] = h;

      // Perspective-mapped screen position
      const xScreen = width / 2 + u * width * perspective;
      const yScreen = yBase - h * perspective * 0.4; // higher height -> visually higher

      positions[r][c] = { x: xScreen, y: yScreen, depth, perspective };
    }
  }

  // Draw filled terrain mesh
  noStroke(); // we'll add subtle grid lines afterwards

  for (let r = 0; r < ROWS - 1; r++) {
    for (let c = 0; c < COLS - 1; c++) {
      const p00 = positions[r][c];
      const p10 = positions[r][c + 1];
      const p01 = positions[r + 1][c];
      const p11 = positions[r + 1][c + 1];

      const h00 = heights[r][c];
      const h10 = heights[r][c + 1];
      const h01 = heights[r + 1][c];
      const h11 = heights[r + 1][c + 1];

      const hAvg = (h00 + h10 + h01 + h11) / 4;

      // Height-based color: valleys -> blue, peaks -> orange/red
      const terrainColor = heightToColor(hAvg, amplitude);
      fill(terrainColor);

      // Quad for this grid cell (ref: https://p5js.org/reference/#/p5/beginShape)
      beginShape();
      vertex(p00.x, p00.y);
      vertex(p10.x, p10.y);
      vertex(p11.x, p11.y);
      vertex(p01.x, p01.y);
      endShape(CLOSE);
    }
  }

  // Subtle grid lines connecting points
  stroke(255, 255, 255, 45);
  strokeWeight(1);

  // Lines along rows (front-to-back bands)
  for (let r = 0; r < ROWS; r++) {
    beginShape();
    for (let c = 0; c < COLS; c++) {
      const p = positions[r][c];
      vertex(p.x, p.y);
    }
    endShape();
  }

  // Lines along columns (left-to-right ridges)
  for (let c = 0; c < COLS; c++) {
    beginShape();
    for (let r = 0; r < ROWS; r++) {
      const p = positions[r][c];
      vertex(p.x, p.y);
    }
    endShape();
  }

  // Optional: small cursor indicator to emphasize mouse control
  drawMouseIndicator(primaryFreq, amplitude);
}

function computeHeight(u, v, t, primaryFreq, amplitude) {
  // A few harmonically-related waves at different directions / speeds
  const wave1 = sin((u * primaryFreq + t * 0.75) * TWO_PI);          // left-right
  const wave2 = sin((v * primaryFreq * 1.7 - t * 0.45) * TWO_PI);    // front-back
  const wave3 = sin(((u + v) * primaryFreq * 0.9 + t * 1.1) * TWO_PI); // diagonal

  // Weighted sum, normalized closer to [-1, 1]
  const combined = (0.6 * wave1 + 0.4 * wave2 + 0.5 * wave3) / (0.6 + 0.4 + 0.5);

  return combined * amplitude;
}

function heightToColor(h, amp) {
  // Normalize to 0..1 based on current amplitude
  const h01 = map(h, -amp, amp, 0, 1, true);

  if (h01 < 0.3) {
    // Deep valley to low mid: deep blue -> blue-green
    const t = h01 / 0.3;
    return lerpColor(colDeepBlue, colBlueGreen, t);
  } else if (h01 < 0.7) {
    // Mid range: blue-green -> yellow
    const t = (h01 - 0.3) / 0.4;
    return lerpColor(colBlueGreen, colYellow, t);
  } else {
    // High peaks: yellow -> red/orange
    const t = (h01 - 0.7) / 0.3;
    return lerpColor(colYellow, colRedOrange, t);
  }
}

function drawMouseIndicator(primaryFreq, amplitude) {
  // Soft vignette at top for text legibility
  noStroke();
  fill(0, 0, 0, 120);
  rect(0, 0, width, 40);

  fill(230);
  textSize(13);
  textAlign(LEFT, CENTER);
  text(
    "Mouse X → primary frequency   |   Mouse Y → wave amplitude",
    18,
    20
  );

  // Tiny circle showing where the "control point" is
  const mx = constrain(mouseX, 0, width);
  const my = constrain(mouseY, 0, height);
  const size = map(amplitude, 40, 220, 8, 18);
  stroke(255, 230);
  strokeWeight(1.5);
  noFill();
  circle(mx, my, size); // ref: https://p5js.org/reference/#/p5/circle
}

function windowResized() {
  // Keep canvas full-window when resized
  // ref: https://p5js.org/reference/#/p5/resizeCanvas
  resizeCanvas(windowWidth, windowHeight);
}