ITS RAINING TACOS

function setup() {
  // Create a canvas that fills the entire browser window
  createCanvas(windowWidth, windowHeight);
  // Set the background color once in setup to dark blue
  background(20, 20, 60);
  // Prevent drawing a border around shapes
  noStroke();
  // Set color mode to RGB for consistent color handling (R, G, B, Alpha)
  colorMode(RGB, 255, 255, 255, 255);

  // Initialize the tacos array
  for (let i = 0; i < numTacos; i++) {
    // Start tacos at random positions, some above the screen
    let x = random(width);
    let y = random(-height, 0);
    // Give each taco a random falling speed
    let speed = random(2, 6);
    tacos.push(new Taco(x, y, speed));
  }
}

function draw() {
  // Draw a semi-transparent dark rectangle over the entire canvas
  // This creates a fading trail effect for the mouse-following circle
  background(20, 20, 60, 10); // The '10' is the alpha (transparency) value

  // --- Mouse-following circle logic ---
  // Set the fill color based on the mouse position using RGB mapping
  // Hue changes across the canvas width, saturation changes with height
  let circleHue = map(mouseX, 0, width, 0, 255); // Hue from red (0) to red (255)
  let circleSaturation = map(mouseY, 0, height, 100, 255); // Saturation from 100 to 255
  let circleBrightness = 230; // Keep brightness high
  fill(circleHue, circleSaturation, circleBrightness);

  // Draw an ellipse (circle) at the current mouse position
  // The size of the circle is fixed at 50 pixels
  ellipse(mouseX, mouseY, 50, 50);

  // --- Raining tacos logic ---
  // Update and display each taco
  for (let taco of tacos) {
    taco.move();
    taco.display();
  }
}

function windowResized() {
  // Resize the canvas to fill the new window dimensions
  resizeCanvas(windowWidth, windowHeight);
  // Redraw the background completely after resizing to avoid artifacts
  background(20, 20, 60);

  // Re-initialize tacos to fit the new screen size
  tacos = []; // Clear existing tacos
  for (let i = 0; i < numTacos; i++) {
    let x = random(width);
    let y = random(-height, 0);
    let speed = random(2, 6);
    tacos.push(new Taco(x, y, speed));
  }
}

class Taco {
  constructor(x, y, speed) {
    this.x = x;
    this.y = y;
    this.speed = speed;
    this.size = random(30, 60); // Random size for variety
    this.rotation = random(-PI / 8, PI / 8); // Slight random rotation
  }

  // Method to update taco's position
  move() {
    this.y += this.speed; // Move downward

    // If taco goes off-screen, reset it to the top
    if (this.y > height + this.size / 2) {
      this.y = -this.size / 2;
      this.x = random(width); // New random horizontal position
      this.speed = random(2, 6); // New random speed
      this.size = random(30, 60); // New random size
      this.rotation = random(-PI / 8, PI / 8); // New random rotation
    }
  }

  // Method to draw the taco
  display() {
    push(); // Save the current drawing state
    translate(this.x, this.y); // Move to the taco's position
    rotate(this.rotation); // Apply rotation

    // --- Draw the taco shell ---
    fill(255, 204, 0); // Yellow/orange for the shell
    arc(0, 0, this.size, this.size * 0.7, PI, TWO_PI, CHORD); // Curved shell

    // --- Draw the taco filling (simple representation) ---
    // Meat
    fill(139, 69, 19); // Brown for meat
    rect(-this.size * 0.2, 0, this.size * 0.4, this.size * 0.15);

    // Lettuce (small green triangles)
    fill(0, 128, 0); // Green for lettuce
    triangle(-this.size * 0.25, -this.size * 0.05, -this.size * 0.1, -this.size * 0.15, -this.size * 0.05, -this.size * 0.05);
    triangle(this.size * 0.25, -this.size * 0.05, this.size * 0.1, -this.size * 0.15, this.size * 0.05, -this.size * 0.05);

    // Tomato (small red circle)
    fill(255, 0, 0); // Red for tomato
    circle(0, -this.size * 0.1, this.size * 0.05);

    pop(); // Restore the previous drawing state
  }
}