p5 storm chasing project

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100);
  textFont('monospace');
  textSize(13);

  generateWeather();
  noLoop(); // draw only when we explicitly ask for it
}

function draw() {
  // Dark bluish background like TV radar
  background(210, 40, 5);

  drawBaseMap();
  drawEchoes();
  drawTornados();
  drawHUD(); // now empty (no HUD text)
}

function generateWeather() {
  echoes = [];
  tornadoes = [];

  // Choose grid resolution so each radar pixel is ~10px
  const targetCellSize = 10;
  gridCols = max(80, floor(width / targetCellSize));
  gridRows = max(50, floor(height / targetCellSize));

  cellW = width / gridCols;
  cellH = height / gridRows;

  // Line of storms oriented SW → NE (roughly -45° in math coords)
  const frontAngle = -PI / 4; // radians, math angle (0=+x, CCW)
  const cosF = cos(frontAngle);
  const sinF = sin(frontAngle);

  const bandWidth = 0.18; // core half-width in normalized coords

  for (let gy = 0; gy < gridRows; gy++) {
    for (let gx = 0; gx < gridCols; gx++) {
      // Normalized map coords (nx, ny) in approx [-1.2..1.2] × [-0.9..0.9]
      const nx = map(gx + 0.5, 0, gridCols, -1.2, 1.2);
      const ny = map(gy + 0.5, 0, gridRows, -0.9, 0.9);

      // Rotate into coordinates along (u) and across (v) the front
      const u = nx * cosF + ny * sinF;      // along line
      const v = -nx * sinF + ny * cosF;     // perpendicular to line

      const bandDist = Math.abs(v);

      // Main squall line core: strongest near v = 0, fading with distance
      const bandFactor = Math.exp(-Math.pow(bandDist / bandWidth, 2)); // 0..1

      // Along-line variation: cells / segments along the band
      const stripe = Math.pow(Math.sin(u * 3.0) * 0.5 + 0.5, 2); // 0..1

      let mainField = bandFactor * stripe;

      // Broad stratiform region on one (cool) side of the front
      let stratField = 0;
      if (v < 0) { // choose one side as the cool sector
        const d = Math.abs(v) / (bandWidth * 2.5);
        if (d < 1) {
          stratField = (1 - d) * 0.55; // lighter but widespread echoes
        }
      }

      // Combine fields
      let field = mainField * 1.4 + stratField;

      // Fade near the outer edges of the map
      const edgeX = smoothstep(0.95, 1.2, Math.abs(nx));
      const edgeY = smoothstep(0.95, 1.2, Math.abs(ny));
      const edgeMask = (1 - edgeX) * (1 - edgeY);
      field *= edgeMask;

      // Add small random texture
      field += random(-0.05, 0.12);

      let intensity = constrain(field, 0, 1);

      // Skip very weak returns (no echo)
      if (intensity < 0.10) continue;

      // Map normalized coords to screen pixels
      const sx = map(nx, -1.2, 1.2, 0, width);
      const sy = map(ny, 0.9, -0.9, 0, height); // ny positive = north (up)

      echoes.push({ x: sx, y: sy, intensity });
    }
  }

  // Extra light background drizzle / speckles
  const drizzleCount = floor(gridCols * gridRows * 0.08);
  for (let i = 0; i < drizzleCount; i++) ++) {
    const sx = random(width);
    const sy = random(height);
    const intensity = random(0.06, 0.18);
    echoes.push({ x: sx, y: sy, intensity });
  }

  // Pick tornado locations from the strongest echoes
  generateTornadoesFromEchoes();
}

function drawBaseMap() {
  rectMode(CORNER);

  // Subtle overlay to separate map area
  noStroke();
  fill(210, 40, 12, 80);
  rect(0, 0, width, height);

  // Lat/long-style grid lines
  stroke(210, 20, 40, 35);
  strokeWeight(1);

  const vLines = 7;
  for (let i = 1; i < vLines; i++) {
    const x = (width / vLines) * i;
    line(x, 0, x, height);
  }

  const hLines = 5;
  for (let i = 1; i < hLines; i++) {
    const y = (height / hLines) * i;
    line(0, y, width, y);
  }

  // Map border
  stroke(120, 30, 70, 80);
  noFill();
  rect(2, 2, width - 4, height - 4);

  // Providence, KY marker
  const prov = lonLatToScreen(-87.76, 37.38);
  noStroke();
  fill(0, 0, 100, 100);
  ellipse(prov.x, prov.y, 6, 6);

  stroke(0, 0, 100, 70);
  noFill();
  ellipse(prov.x, prov.y, 18, 18);

  // City label
  noStroke();
  fill(0, 0, 100, 100);
  textAlign(LEFT, BOTTOM);
  text('YOU', prov.x + 10, prov.y - 4);
}

function drawTornados() {
  for (const t of tornadoes) {
    const r = map(t.strength, 0.8, 1, 16, 28, true);

    // Red warning ring
    noFill();
    stroke(0, 100, 100, 90); // bright red
    strokeWeight(2);
    ellipse(t.x, t.y, r * 2, r * 2);

    // Tornado "funnel" triangle
    push();
    translate(t.x, t.y);
    // Slight rotation that changes with frameCount
    rotate(frameCount * 0.15);
    noStroke();
    fill(0, 100, 100, 90); // red
    const size = r * 0.9;
    triangle(
      -size * 0.4, size * 0.5,
      0,          -size * 0.7,
      size * 0.4, size * 0.5
    );
    pop();

    // Label text
    noStroke();
    fill(0, 0, 100, 100);
    textAlign(LEFT, CENTER);
    text('TORNADO', t.x + r + 6, t.y);
  }
}

function drawEchoes() {
  rectMode(CENTER);
  noStroke();

  const w = cellW * 1.2;
  const h = cellH * 1.2;

  for (const e of echoes) {
    const i = constrain(e.intensity, 0, 1);

    // NWS-ish reflectivity color ramp: green → yellow → red
    let hue;
    if (i < 0.25) {
      hue = map(i, 0, 0.25, 140, 120);   // light → medium green
    } else if (i < 0.5) {
      hue = map(i, 0.25, 0.5, 120, 90);  // green → yellow-green
    } else if (i < 0.75) {
      hue = map(i, 0.5, 0.75, 90, 60);   // yellow-green → yellow/orange
    } else {
      hue = map(i, 0.75, 1, 60, 0);      // orange → red
    }

    const sat = map(i, 0, 1, 60, 100);
    const bri = map(i, 0, 1, 70, 100);
    const alpha = map(i, 0, 1, 75, 100);

    fill(hue, sat, bri, alpha);
    rect(e.x, e.y, w, h);

    // Extra: hail cores (magenta spots) on very strong reflectivity
    if (i > 0.9) {
      fill(300, 80, 100, 90); // magenta in HSB
      ellipse(e.x, e.y, w * 0.6, h * 0.6);
    }
  }
}

function generateTornadoesFromEchoes() {
  tornadoes = [];

  // Candidate echoes: VERY strong reflectivity
  const candidates = [];
  for (const e of echoes) {
    if (e.intensity > 0.9) { // higher threshold → fewer candidates
      candidates.push(e);
    }
  }

  if (candidates.length === 0) return;

  // Make tornadoes rare: only some scans have any tornado at all
  if (random() < 0.7) return; // ~70% of frames: no tornadoes

  const maxTornadoes = 1; // at most one tornado per frame
  const minSeparation = min(width, height) * 0.12;
  let safety = 0;

  while (tornadoes.length < maxTornadoes && safety < 200 && candidates.length > 0) {
    safety++;
    const pick = random(candidates); // p5.random(array) → random element

    let ok = true;
    for (const t of tornadoes) {
      if (dist(pick.x, pick.y, t.x, t.y) < minSeparation) {
        ok = false;
        break;
      }
    }
    if (ok) {
      tornadoes.push({
        x: pick.x,
        y: pick.y,
        strength: pick.intensity
      });
    }
  }
}

function smoothstep(edge0, edge1, x) {
  const t = constrain((x - edge0) / (edge1 - edge0), 0, 1);
  return t * t * (3 - 2 * t);
}

function lonLatToScreen(lon, lat) {
  const x = map(lon, LON_MIN, LON_MAX, 0, width);
  const y = map(lat, LAT_MAX, LAT_MIN, 0, height); // lat up = smaller y
  return { x, y };
}

function mousePressed() {
  generateWeather();
  redraw(); // re-render once
}

function touchStarted() {
  generateWeather();
  redraw(); // re-render once
  return false; // prevent scrolling on mobile
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  generateWeather();
  redraw();
}

function drawHUD() {
  // Intentionally left blank — no extra HUD text or bars
}