FlightRadar 2.0

CONCEPT

This project visualizes my travel itineraries between home (Bucharest) and NYU Abu Dhabi. Since I’ve taken this journey multiple times, I wanted to find a way to represent these flights visually, capturing the routes on a map and animating the flights in a way that reflects their random and varied nature. Using p5.js, I created a sketch where autonomous planes travel between Bucharest and Abu Dhabi, tracing their paths as they move. The project reflects my personal connection to these two cities and the significant journeys I make between them.

CODE HIGHLIGHT

One part of the code I’m particularly proud of is the way I handled the autonomous flight paths. The planes move between two coordinates (Bucharest and Abu Dhabi) with a subtle randomness. They don’t all fly in the same direction at the same time, which mimics the variability of real-life flight schedules. I also implemented a smooth transition using p5.Vector.lerp, and each flight leaves behind a trace as it travels, symbolizing the many paths I’ve taken.

Here’s a snippet of the code that makes the flights smooth and random:

class Flight {
  constructor(x1, y1, x2, y2, delay) {
    this.start = createVector(x1, y1);
    this.end = createVector(x2, y2);
    this.pos = createVector(x1, y1);
    this.speed = random(0.001, 0.002); // Slower speed for each flight
    this.t = 0; // Parameter for lerp
    this.angle = atan2(this.end.y - this.start.y, this.end.x - this.start.x); 
    this.path = []; 
    this.delay = delay; 
    this.hasStarted = false;
  }

  update() {
    if (frameCount > this.delay) {
      this.hasStarted = true;
    }
    
    if (this.hasStarted) {
      this.t += this.speed;
      if (this.t > 1) {
        this.t = 0;
      }
      this.pos = p5.Vector.lerp(this.start, this.end, this.t);
      this.path.push(this.pos.copy());
      paths.push(this.path);
    }
  }

  display() {
    if (this.hasStarted) {
      push();
      translate(this.pos.x, this.pos.y);
      rotate(this.angle); 
      imageMode(CENTER);
      image(planeImg, 0, 0, 40, 40); 
      pop();
    }
  }
}

This part of the code ensures that each plane follows its route independently, with a delay that makes the animations feel more organic and less synchronized.

You can see the embedded sketch of the project here. It shows multiple flights moving between Bucharest and Abu Dhabi at random intervals, leaving traces behind them on the map.

This project captures a very personal aspect of my life—the regular trips I take between Bucharest and NYU Abu Dhabi. In future iterations, I’d love to add more cities to the map to reflect layovers or other places I’ve visited. I’m also considering adding more interaction, allowing users to click on a city and start a flight from there or adjust the speed and appearance of the planes.

Additionally, I could incorporate real-time data, like actual flight paths or distances traveled, to make the animation even more realistic. Another idea is to create a log of these trips, showing statistics like the number of flights, total distance traveled, or the amount of time spent in the air, adding an informative layer to the artistic representation.