let delhiX, delhiY; // Variables to store Delhi's x and y coordinates

let isAnimating = false; // Flag to check if the animation should be running

let temperatures = [];

let windDirections = [];

let windSpeeds = [];

let particles = [];

let index = 0;

const ROW_TIME = 120;

const JUMP_FORWARD = 24;

let dateInput;

let jumpButton;

​

function preload() {

   cityTable = loadTable('updated_cities.csv', 'csv', 'header');

    weatherTable = loadTable('updated_testset.csv', 'csv', 'header');

}

​

function setup() {

  createCanvas(800, 800);

  noStroke();

  background(0);

​

  // Load data from the table

  for (let row of cityTable.rows) {

            let city = row.getString('city');

            let lat = row.getNum('lat');

            let lng = row.getNum('lng');

​

            // Convert latitude and longitude to x and y

            let x = map(lng, 65, 100, 0, width);

            let y = map(lat, 5, 35, height, 0);

​

            if (city === "Delhi") {

                fill(255, 255, 255);  // Color for Delhi

                delhiX = x;

                delhiY = y;

              ellipse(x,y,20,20)

            } else {

                fill(255, 0, 0,150);  // Color for other cities

            }

​

            ellipse(x, y, 10, 10);

        }

  for (let row of weatherTable.rows) {

    let temp = row.getNum(" _tempm");

    temperatures.push(isNaN(temp) ? 25 : temp); // Use 25 if temperature is NaN

    let windDir = row.getString(" _wdire");

    windDirections.push(windDir === "" ? "East" : windDir); // Use "East" if windDir is empty

    let windSpd = row.getNum(" _wspdm");

    windSpeeds.push(isNaN(windSpd) ? 0 : windSpd); // Use 0 if wind speed is NaN

  }

​

  // Create an input field and a button

  dateInput = createInput();

  dateInput.position(20, height + 20); // Place it below the canvas

​

  jumpButton = createButton("Jump to Date (Enter in dd-mm-yyyy)");

  jumpButton.position(dateInput.x + dateInput.width + 10, height + 20);

  jumpButton.mousePressed(jumpToDate);

​

  for (let x = -100; x < width + 100; x += 17) {

    for (let y = -100; y < height + 100; y += 17) {

      particles.push(new Particle(x, y));

    }

  }

}

​

function draw() {

  if (!isAnimating) {

        // Check if mouse is over Delhi

        if (dist(mouseX, mouseY, delhiX, delhiY) < 10) {

            cursor(HAND);  // Change cursor to hand pointer

            if (mouseIsPressed) {

                isAnimating = true;

                setup(); // Restart setup to initiate the animation

            }

        } else {

            cursor(ARROW);  // Default cursor

        }

  // Draw an arrow pointing towards Delhi

    fill(255);

                stroke(0);

                strokeWeight(2);

                line(delhiX + 20, delhiY, delhiX + 60, delhiY);

                triangle(delhiX , delhiY , delhiX + 55, delhiY + 5, delhiX + 65, delhiY);

                // Display the message

                noStroke();

                textSize(14);

                text("Click on Delhi", delhiX + 70, delhiY + 5);}

  else{

  background(0, 15);

  if (frameCount % ROW_TIME == 0) index = (index + 1) % temperatures.length;

  for (let i = particles.length - 1; i >= 0; i--) {

    let p = particles[i];

    if (p.isFarFromOrigin()) {

      let oldPos = p.originalPos.copy(); // Store the original position before deleting

      particles.splice(i, 1); // remove particle from the list

      particles.push(new Particle(oldPos.x, oldPos.y)); // Add a new particle at the stored position

    } else {

      p.update();

      p.show();

    }

  }

  displayInfo();}

}

​

function jumpToDate() {

  let inputDate = dateInput.value();

  let dateParts = inputDate.split("-");

  let formattedInputDate = dateParts[2] + dateParts[1] + dateParts[0];

​

  for (let i = 0; i < table.getRowCount(); i++) {

    let rowDate = table.getString(i, "datetime_utc").split("-")[0]; // Extract just the date part

    if (rowDate === formattedInputDate) {

      index = i; // Set the index to the found row

      break;

    }

  }

}

​

function displayInfo() {

  let dateTime = weatherTable.getString(index, "datetime_utc");

  let windDir = weatherTable.getString(index, " _wdire");

  let windSpd = weatherTable.getString(index, " _wspdm");

  let temp = weatherTable.getString(index, " _tempm");

  // Draw a larger semi-transparent rectangle to fit additional info

  fill(0, 100);

  noStroke();

  rect(10, 10, 250, 100); // Adjust size as needed

​

  // Display date and time, wind direction, wind speed, and temperature inside the rectangle

  fill(255); // White text

  textSize(14);

  textAlign(LEFT, TOP);

  text("Date & Time: " + dateTime, 20, 20);

  text("Wind Direction: " + windDir, 20, 40);

  text("Wind Speed: " + windSpd + " km/h", 20, 60);

  text("Temperature: " + temp + " °C", 20, 80);

}

​

class Particle {

  constructor(x, y) {

    this.pos = createVector(x, y);

    this.originalPos = this.pos.copy();

    this.size = random(1, 20);

    this.angle = 0;

  }

  //checks the distance moved from starting point

  isFarFromOrigin() {

    return p5.Vector.dist(this.pos, this.originalPos) > random(100, 250);

  }

​

  update() {

    // Convert wind direction to angle

    this.angle = this.directionToAngle(windDirections[index]);

​

    // Create a vector for wind direction

    let windVec = p5.Vector.fromAngle(this.angle);

    windVec.mult(windSpeeds[index] * 0.2);

​

    // Adding Perlin noise for adding randomness to make it feel more natural

​

    let noiseVal = noise(

      this.pos.x * 0.01,

      this.pos.y * 0.01,

      millis() * 0.0005

    );

​

    let dir = windDirections[index];

    if (windSpeeds[index] == 0) {

      if (dir == "North" || dir == "NW" || dir == "NE") noiseVal *= -1;

      else if (dir == "NNW" || dir == "NNE") noiseVal *= -0.6;

      else if (dir == "ENE" || dir == "WNW") noiseVal *= -0.3;

      else if (dir == "East" || dir == "West") noiseVal *= 0.1;

      else if (dir == "ESE" || dir == "WSW") noiseVal *= 0.3;

      else if (dir == "SSE" || dir == "SSW") noiseVal *= 0.6;

    }

​

    let noiseVec = p5.Vector.fromAngle(noiseVal * TWO_PI * 0.7); // Adjust multiplier as needed

​

    // Combine wind vector with noise vector

    let combinedVec = p5.Vector.add(windVec, noiseVec);

    this.pos.add(combinedVec);

​

    // Map temperature to color

    let col = lerpColor(

      color(0, 0, 255),

      color(255, 0, 0),

      map(temperatures[index], 0, 40, 0, 1)

    );

    fill(col);

  }

​

  show() {

    push();

    translate(this.pos.x, this.pos.y);

    rotate(this.angle);

    rect(0, 0, this.size, this.size * 0.3);

    pop();

  }

​

  directionToAngle(direction) {

    switch (direction) {

      case "North":

        return -PI / 2; // Upward on the canvas

      case "NE":

        return -PI / 4;

      case "East":

        return 0; // Rightward on the canvas

      case "SE":

        return PI / 4;

      case "South":

        return PI / 2; // Downward on the canvas

      case "SW":

        return (3 * PI) / 4;

      case "West":

        return PI; // Leftward on the canvas

      case "NW":

        return (-3 * PI) / 4;

      case "WSW":

        return (7 * PI) / 8;

      case "WNW":

        return (-7 * PI) / 8;

      case "ENE":

        return -PI / 8;

      case "ESE":

        return PI / 8;

      case "SSW":

        return (5 * PI) / 8;

      case "SSE":

        return (3 * PI) / 8;

      case "NNE":

        return (-3 * PI) / 8;

      case "NNW":

        return (-5 * PI) / 8;

      default:

        return 0;

    }

  }

}

​

function mouseClicked() {

  index = (index + JUMP_FORWARD) % temperatures.length;

}

​