theme of the day

function setup() {
  createCanvas(windowWidth, windowHeight);
  pixelDensity(1); // keep consistent across devices

  // Off-screen WEBGL buffer for the 3D scene
  cityBuffer = createGraphics(width, height, WEBGL);
  cityBuffer.pixelDensity(1);

  // Smaller buffer for cheap blur (downscale then upscale)
  const blurScale = 4;
  blurBuffer = createGraphics(
    Math.max(1, Math.floor(width / blurScale)),
    Math.max(1, Math.floor(height / blurScale))
  );

  initCity();
  initCamera();
}

function initCity() {
  // Generate a grid of box "buildings" with varied sizes
  buildings = [];

  citySpacing = (min(width, height) / max(cityCols, cityRows)) * 0.7;
  cityStartX = -((cityCols - 1) * citySpacing) / 2;
  cityStartZ = -((cityRows - 1) * citySpacing) / 2;

  for (let i = 0; i < cityCols; i++) {
    for (let j = 0; j < cityRows; j++) {
      const x = cityStartX + i * citySpacing;
      const z = cityStartZ + j * citySpacing;

      const baseSize = citySpacing * 0.6;
      const w = random(baseSize * 0.7, baseSize * 1.3);
      const d = random(baseSize * 0.7, baseSize * 1.3);
      const h = random(citySpacing * 0.9, citySpacing * 3.5);

      // Soft, slightly desaturated building colors
      const col = color(
        random(170, 230),
        random(170, 230),
        random(170, 240)
      );

      buildings.push({ x, z, w, d, h, col });
    }
  }
}

function initCamera() {
  // Start slightly above ground, looking into the city from the front
  camYaw = 0;       // 0 = looking toward -Z
  camY = 140;       // ground is at Y = 200 (Y+ is downward)
  const cityDepth = (cityRows - 1) * citySpacing;
  const frontZ = cityStartZ + cityDepth / 2 + citySpacing * 4;
  camX = 0;
  camZ = frontZ;
}

function handleMovement() {
  const baseSpeed = 8;
  const rotSpeed = 0.04;

  // Rotate with A/D or left/right on-screen buttons
  if (keyIsDown(65) || touchMove.left) { // A
    camYaw -= rotSpeed;
  }
  if (keyIsDown(68) || touchMove.right) { // D
    camYaw += rotSpeed;
  }

  // Move forward/back with W/S or up/down on-screen buttons
  let speed = baseSpeed;
  if (keyIsDown(SHIFT)) {
    speed *= 1.8;
  }

  const forwardX = Math.sin(camYaw);
  const forwardZ = -Math.cos(camYaw);

  if (keyIsDown(87) || touchMove.forward) { // W
    camX += forwardX * speed;
    camZ += forwardZ * speed;
  }
  if (keyIsDown(83) || touchMove.back) { // S
    camX -= forwardX * speed;
    camZ -= forwardZ * speed;
  }

  // Keep camera roughly within the city area
  if (citySpacing) {
    const margin = citySpacing * 3;
    const minX = cityStartX - margin;
    const maxX = cityStartX + (cityCols - 1) * citySpacing + margin;
    const minZ = cityStartZ - margin;
    const maxZ = cityStartZ + (cityRows - 1) * citySpacing + margin;
    camX = constrain(camX, minX, maxX);
    camZ = constrain(camZ, minZ, maxZ);
  }
}

function drawCityToBuffer() {
  const g = cityBuffer;

  g.background(210, 230, 255); // soft sky color
  g.noStroke();

  // --- Camera on the off-screen WEBGL buffer ---
  // Positive Y is *down* in p5 WEBGL, so to look slightly DOWN
  // toward the ground we use centerY > camY.
  const lookDist = citySpacing * 4; // how far ahead we look
  const centerX = camX + Math.sin(camYaw) * lookDist;
  const centerZ = camZ - Math.cos(camYaw) * lookDist;
  const centerY = camY + 20; // look slightly downward

  // See p5.camera reference: https://p5js.org/reference/#/p5/camera
  g.camera(
    camX, camY, camZ,     // eye
    centerX, centerY, centerZ, // center we're looking at
    0, 1, 0               // up vector
  );

  // Perspective with generous near/far so nothing gets clipped
  // See p5.perspective: https://p5js.org/reference/#/p5/perspective
  const fov = PI / 3;
  g.perspective(fov, width / height, 1, 10000);

  // Lighting
  g.ambientLight(80);
  // Warm directional "sunlight" from above-right
  g.directionalLight(255, 245, 230, 0.5, -1, -0.3);
  // Cool fill light from the opposite side
  g.directionalLight(180, 200, 255, -0.3, -0.5, 0.4);

  // Ground plane
  g.push();
  g.translate(0, 200, 0);
  g.rotateX(HALF_PI);
  g.ambientMaterial(220, 230, 220);
  g.plane(4000, 4000);
  g.pop();

  // Roads along Z (horizontal streets)
  const roadHeight = 4;
  const roadThickness = citySpacing * 0.28;
  g.ambientMaterial(60);
  for (let j = 0; j <= cityRows; j++) {
    const z = cityStartZ - citySpacing * 0.5 + j * citySpacing;
    g.push();
    g.translate(0, 200 - roadHeight / 2, z);
    g.box((cityCols + 2) * citySpacing, roadHeight, roadThickness);
    g.pop();
  }

  // Roads along X (vertical streets)
  for (let i = 0; i <= cityCols; i++) {
    const x = cityStartX - citySpacing * 0.5 + i * citySpacing;
    g.push();
    g.translate(x, 200 - roadHeight / 2, 0);
    g.box(roadThickness, roadHeight, (cityRows + 2) * citySpacing);
    g.pop();
  }

  // Draw buildings
  for (let b of buildings) {
    g.push();
    // 200 is "ground" Y; center boxes so bases sit on the ground
    g.translate(b.x, 200 - b.h / 2, b.z);

    // Make taller buildings a bit shinier (glass towers)
    const isTall = b.h > citySpacing * 2.4;
    if (isTall) {
      g.specularMaterial(
        red(b.col) + 20,
        green(b.col) + 20,
        blue(b.col) + 20
      );
      g.shininess(40);
    } else {
      g.ambientMaterial(b.col);
    }

    g.box(b.w, b.h, b.d);

    // Darker roof for contrast
    g.push();
    g.translate(0, -b.h / 2 + 1, 0);
    g.ambientMaterial(
      red(b.col) * 0.7,
      green(b.col) * 0.7,
      blue(b.col) * 0.7
    );
    g.box(b.w * 0.98, 2, b.d * 0.98);
    g.pop();

    g.pop();
  }
}

function drawArrowButton(btn, label, active) {
  push();
  rectMode(CENTER);
  textAlign(CENTER, CENTER);

  fill(255, active ? 170 : 90);
  noStroke();
  rect(btn.x, btn.y, btn.size, btn.size, 12);

  fill(20);
  textSize(22);
  text(label, btn.x, btn.y + 1);
  pop();
}

function drawHUD() {
  push();

  // Instruction panel
  const pad = 10;
  const boxW = 260;
  const boxH = 60;
  fill(0, 150);
  noStroke();
  rect(pad, pad, boxW, boxH, 6);

  fill(255);
  textSize(12);
  textAlign(LEFT, TOP);
  text(
    "W/S: move forward/back   A/D: turn\n" +
    "Mouse / touch: move focus band\n" +
    "On mobile: use arrow buttons below",
    pad + 10,
    pad + 8
  );

  // On-screen movement buttons (for touch / mouse)
  const size = 56;
  const cx = width / 2;
  const cy = height - size * 1.6;

  uiButtons.forward = { x: cx, y: cy - size, size };
  uiButtons.back = { x: cx, y: cy + size, size };
  uiButtons.left = { x: cx - size * 1.4, y: cy, size };
  uiButtons.right = { x: cx + size * 1.4, y: cy, size };

  drawArrowButton(uiButtons.forward, "▲", touchMove.forward);
  drawArrowButton(uiButtons.back, "▼", touchMove.back);
  drawArrowButton(uiButtons.left, "◀", touchMove.left);
  drawArrowButton(uiButtons.right, "▶", touchMove.right);

  pop();
}

function isInsideButton(px, py, btn) {
  if (!btn) return false;
  const half = btn.size / 2;
  return (
    px >= btn.x - half &&
    px <= btn.x + half &&
    py >= btn.y - half &&
    py <= btn.y + half
  );
}

function handlePointerPress(px, py) {
  // Reset then activate whichever button is under the pointer
  touchMove.forward = touchMove.back = touchMove.left = touchMove.right = false;

  if (isInsideButton(px, py, uiButtons.forward)) {
    touchMove.forward = true;
  } else if (isInsideButton(px, py, uiButtons.back)) {
    touchMove.back = true;
  } else if (isInsideButton(px, py, uiButtons.left)) {
    touchMove.left = true;
  } else if (isInsideButton(px, py, uiButtons.right)) {
    touchMove.right = true;
  }
}

function clearTouchMove() {
  touchMove.forward = touchMove.back = touchMove.left = touchMove.right = false;
}

function draw() {
  // Update camera from keyboard / touch controls
  handleMovement();

  // 1) Render 3D city into WEBGL buffer
  drawCityToBuffer();

  // 2) Create a blurred version via downscale -> upscale
  blurBuffer.push();
  blurBuffer.clear();
  blurBuffer.image(cityBuffer, 0, 0, blurBuffer.width, blurBuffer.height);
  blurBuffer.pop();

  // 3) Draw blurred full-screen base
  background(0);
  image(blurBuffer, 0, 0, width, height);

  // 4) Compute focus band position (mouse/touch-controlled)
  let pointerY = mouseY;
  if (touches.length > 0) {
    pointerY = touches[0].y;
  }

  const focusCenter = constrain(pointerY, height * 0.25, height * 0.75);
  const focusHeight = height * 0.25;

  let y1 = focusCenter - focusHeight / 2;
  let y2 = focusCenter + focusHeight / 2;
  y1 = max(0, y1);
  y2 = min(height, y2);
  const bandH = y2 - y1;

  // 5) Overlay a SHARP band from the original 3D buffer
  image(
    cityBuffer,
    0, y1, width, bandH,  // destination rect
    0, y1, width, bandH   // source rect (same Y band)
  );

  // HUD (instructions + touch controls)
  drawHUD();
}

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

  // Recreate buffers with new size
  cityBuffer = createGraphics(width, height, WEBGL);
  cityBuffer.pixelDensity(1);

  const blurScale = 4;
  blurBuffer = createGraphics(
    Math.max(1, Math.floor(width / blurScale)),
    Math.max(1, Math.floor(height / blurScale))
  );

  // Rebuild city + reset camera for new size
  initCity();
  initCamera();
}

function mousePressed() {
  handlePointerPress(mouseX, mouseY);
  return false; // prevent text selection / scrolling
}

function mouseReleased() {
  clearTouchMove();
  return false;
}

function touchStarted() {
  if (touches.length > 0) {
    const t = touches[0];
    handlePointerPress(t.x, t.y);
  }
  return false; // prevent page scrolling
}

function touchEnded() {
  clearTouchMove();
  return false;
}