Sketch 2026-02-23 03:27

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Tip: Use windowWidth/windowHeight for responsive canvas

  // Initialize positions and sizes relative to canvas dimensions
  // This makes the sketch responsive to different screen sizes, including your tablet
  gunW = width * 0.15; // Gun width is 15% of canvas width
  gunH = height * 0.2; // Gun height is 20% of canvas height
  gunX = width * 0.8; // Gun is positioned 80% from the left
  gunY = height * 0.9; // Gun is positioned 90% from the top (on the ground)

  flareSize = width * 0.02; // Flare size is 2% of canvas width
  flareSpeed = height * 0.01; // Flare moves up by 1% of canvas height per frame

  airplaneSpeed = width * 0.005; // Airplane moves horizontally by 0.5% of canvas width per frame
  supplyDropSpeed = height * 0.003; // Supply drop falls by 0.3% of canvas height per frame

  vehicleSpeedBase = width * 0.003; // Base speed for vehicles
  vehicleSize = width * 0.04; // Size of vehicle emojis

  // Create and position the flare button
  flareButton = createButton('Shoot Flare');
  flareButton.position(width * 0.05, height * 0.05); // Position top-left
  flareButton.style('font-size', '16px');
  flareButton.style('padding', '10px 20px');
  flareButton.style('background-color', '#ff5733'); // Orange-red color
  flareButton.style('color', 'white');
  flareButton.style('border', 'none');
  flareButton.style('border-radius', '5px');
  flareButton.mousePressed(triggerFlareSequence); // Attach trigger function to button press
  flareButton.touchStarted(triggerFlareSequence); // Also work on touch devices
}

function draw() {
  background(135, 206, 235); // Sky blue background

  drawGround();
  drawFlareGun();

  // Update and draw the flare if active
  if (flareActive) {
    updateFlare();
  }

  // Update and draw all active airplanes
  for (let i = airplanes.length - 1; i >= 0; i--) {
    let airplane = airplanes[i];
    drawAirplane(airplane);
    updateAirplane(airplane, i);
  }

  // Update and draw all active supply drops
  for (let i = supplyDrops.length - 1; i >= 0; i--) {
    let supplyDrop = supplyDrops[i];
    drawSupplyDrop(supplyDrop);
    updateSupplyDrop(supplyDrop, i);
  }

  // Update and draw all active vehicles
  for (let i = vehicles.length - 1; i >= 0; i--) {
    let vehicle = vehicles[i];
    drawVehicle(vehicle);
    updateVehicle(vehicle, i);
  }
}

function drawGround() {
  fill(0, 100, 0); // Green ground
  noStroke();
  rect(0, height * 0.9, width, height * 0.1); // Covers the bottom 10% of the canvas
}

function drawFlareGun() {
  fill(100); // Gray gun body
  rect(gunX, gunY, gunW, gunH);

  fill(150); // Lighter gray barrel
  rect(gunX + gunW * 0.2, gunY - gunH * 0.3, gunW * 0.6, gunH * 0.5);

  fill(50); // Darker gray handle
  rect(gunX + gunW * 0.1, gunY + gunH * 0.8, gunW * 0.4, gunH * 0.2);
}

function triggerFlareSequence() {
  // Only allow shooting if a flare is not currently active
  // This prevents spamming flares too quickly, but allows multiple airplanes/supply drops
  if (!flareActive) {
    flareActive = true;
    flareX = gunX + gunW * 0.5; // Flare starts from the middle of the gun barrel
    flareY = gunY - gunH * 0.3; // Flare starts from the top of the gun barrel
  }
}

function updateFlare() {
  flareY -= flareSpeed; // Move flare upwards

  // Flare visual effect (a glowing circle)
  noStroke();
  for (let i = 0; i < 3; i++) {
    fill(255, 100, 0, map(i, 0, 2, 80, 20)); // Orange-red color with decreasing opacity for glow
    ellipse(flareX, flareY, flareSize + i * flareSize * 0.5); // Larger ellipses for glow
  }

  // Check if flare has reached its peak
  if (flareY < height * 0.1) {
    flareActive = false; // Deactivate flare

    // Create a new airplane object and add it to the airplanes array
    let newAirplane = {
      x: width + width * 0.1, // Airplane starts off-screen to the right
      y: height * 0.15, // Airplane flies at 15% from the top
      hasDropped: false // Flag to ensure it only drops one supply
    };
    airplanes.push(newAirplane);
  }
}

function drawAirplane(airplane) {
  fill(180, 180, 180); // Silver gray airplane
  noStroke();

  // Main body of the airplane (simple polygon)
  beginShape();
  vertex(airplane.x, airplane.y);
  vertex(airplane.x + width * 0.05, airplane.y - height * 0.015);
  vertex(airplane.x + width * 0.15, airplane.y - height * 0.015);
  vertex(airplane.x + width * 0.2, airplane.y);
  vertex(airplane.x + width * 0.15, airplane.y + height * 0.015);
  vertex(airplane.x + width * 0.05, airplane.y + height * 0.015);
  endShape(CLOSE);

  // Wings
  rect(airplane.x + width * 0.08, airplane.y - height * 0.04, width * 0.04, height * 0.08); // Right wing
  rect(airplane.x + width * 0.08, airplane.y - height * 0.04, -width * 0.04, height * 0.08); // Left wing (negative width to draw left)

  // Tail
  triangle(
    airplane.x + width * 0.2, airplane.y,
    airplane.x + width * 0.22, airplane.y - height * 0.015,
    airplane.x + width * 0.22, airplane.y + height * 0.015
  );
  rect(airplane.x + width * 0.21, airplane.y - height * 0.03, width * 0.01, height * 0.03); // Vertical tail fin
}

function updateAirplane(airplane, index) {
  airplane.x -= airplaneSpeed; // Move airplane to the left

  // When airplane is roughly halfway across and hasn't dropped yet, release drop
  if (airplane.x < width * airplaneDropXRatio && !airplane.hasDropped) {
    airplane.hasDropped = true; // Mark airplane as having dropped its supply

    // Create a new supply drop object and add it to the supplyDrops array
    let newSupplyDrop = {
      x: airplane.x + width * 0.1, // Drop from middle of airplane
      y: airplane.y + height * 0.02, // Start just below airplane
      size: width * 0.05, // Supply drop size is 5% of canvas width
      collected: false // Flag to track if it's been collected by a vehicle
    };
    supplyDrops.push(newSupplyDrop);

    // Spawn vehicles to chase this new supply drop
    spawnVehiclesForDrop(newSupplyDrop);
  }

  // Check if airplane has flown off-screen to the left
  if (airplane.x < -width * 0.2) {
    airplanes.splice(index, 1); // Remove airplane from the array
  }
}

function drawSupplyDrop(supplyDrop) {
  if (supplyDrop.collected) return; // Don't draw if collected

  fill(200, 200, 200); // Light gray parachute dome
  noStroke();
  arc(supplyDrop.x, supplyDrop.y, supplyDrop.size * 1.5, supplyDrop.size * 1, PI, TWO_PI); // Arc for parachute

  stroke(0); // Black lines for parachute ropes
  line(supplyDrop.x - supplyDrop.size * 0.3, supplyDrop.y, supplyDrop.x - supplyDrop.size * 0.2, supplyDrop.y + supplyDrop.size * 0.2);
  line(supplyDrop.x + supplyDrop.size * 0.3, supplyDrop.y, supplyDrop.x + supplyDrop.size * 0.2, supplyDrop.y + supplyDrop.size * 0.2);

  fill(150, 75, 0); // Brown box for supply crate
  stroke(0);
  rectMode(CENTER); // Draw rectangle from its center
  rect(supplyDrop.x, supplyDrop.y + supplyDrop.size * 0.4, supplyDrop.size * 0.8, supplyDrop.size * 0.8);
  rectMode(CORNER); // Reset rectMode to default
}

function updateSupplyDrop(supplyDrop, index) {
  if (supplyDrop.collected) {
    supplyDrops.splice(index, 1); // Remove if collected
    return;
  }

  supplyDrop.y += supplyDropSpeed; // Move supply drop downwards

  // Check if supply drop has hit the ground
  if (supplyDrop.y > height * 0.9) {
    supplyDrops.splice(index, 1); // Remove if it lands without being collected
  }
}

function spawnVehiclesForDrop(drop) {
  let count = floor(random(vehicleCountPerDrop.min, vehicleCountPerDrop.max + 1));
  for (let i = 0; i < count; i++) {
    let type = random(vehicleTypes);
    let newVehicle = {
      x: random(width), // Start from a random x position on the ground
      y: height * 0.9,
      type: type,
      speed: vehicleSpeedBase * random(0.8, 1.2), // Slightly varied speed
      targetDrop: drop, // Assign this supply drop as its target
      collected: false // Flag to track if it has collected a drop
    };
    vehicles.push(newVehicle);
  }
}

function drawVehicle(vehicle) {
  // Vehicle is always drawn, even if collected, for drive-off animation.

  // Use text() to draw the emoji for the vehicle
  textSize(vehicleSize);
  textAlign(CENTER, CENTER);
  noStroke();
  fill(0); // Black color for emoji text
  text(vehicle.type, vehicle.x, vehicle.y - vehicleSize / 2); // Position emoji above the ground
}

function updateVehicle(vehicle, index) {
  if (vehicle.collected) {
    // If collected, drive off-screen (e.g., to the right)
    vehicle.x += vehicleSpeedBase * 2;
    if (vehicle.x > width + vehicleSize) {
      vehicles.splice(index, 1); // Remove from array once off-screen
    }
    return;
  }

  // If the target drop is no longer valid (e.g., landed and removed, or collected by another vehicle),
  // then the vehicle gives up and drives off.
  if (!vehicle.targetDrop || vehicle.targetDrop.collected) {
    vehicle.collected = true;
    return;
  }

  // Move vehicle towards the target drop's x position
  if (vehicle.x < vehicle.targetDrop.x) {
    vehicle.x += vehicle.speed;
  } else if (vehicle.x > vehicle.targetDrop.x) {
    vehicle.x -= vehicle.speed;
  }

  // Keep vehicle on the ground
  vehicle.y = height * 0.9;

  // Check for collection: if the vehicle is close to the drop's x position
  // AND the drop has landed on the ground.
  if (abs(vehicle.x - vehicle.targetDrop.x) < vehicleSize / 2 && vehicle.targetDrop.y > height * 0.9 - vehicleSize / 2) {
    vehicle.collected = true; // Mark vehicle as having collected
    vehicle.targetDrop.collected = true; // Mark the drop as collected
    // The drop will be removed in updateSupplyDrop() on the next frame
  }
}

function mousePressed() {
  // Removed: shootBullet();
  // userStartAudio(); // Uncomment if you add sound effects later
}

function touchStarted() {
  // Removed: shootBullet();
  // userStartAudio(); // Uncomment if you add sound effects later
  // Removed: return false; // Prevent default touch behavior (e.g., scrolling) on the canvas
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Recalculate all positions and sizes to maintain responsiveness
  gunW = width * 0.15;
  gunH = height * 0.2;
  gunX = width * 0.8;
  gunY = height * 0.9;

  flareSize = width * 0.02;
  flareSpeed = height * 0.01;

  airplaneSpeed = width * 0.005;
  supplyDropSpeed = height * 0.003;

  vehicleSpeedBase = width * 0.003;
  vehicleSize = width * 0.04;

  // Removed: Bullet properties recalculation
  // Removed: bulletSize = width * 0.05; // Recalculate bullet size to match supply drop size
  // Removed: bulletSpeed = width * 0.02; // Recalculate bullet speed

  // Reposition the flare button
  flareButton.position(width * 0.05, height * 0.05);

  // Existing airplanes, supply drops, and vehicles will automatically scale
  // because their update logic uses width/height for calculations.
  // No need to explicitly re-position existing objects.
}