Since my early childhood, I have loved to fly. It was always an exciting moment for me to board the plane as it promised me the upcoming trip. In anticipation of adventures, I always wondered how often I would travel when I became an adult.
Now, I still love to fly, and I do it much more compared to my younger self. Nevertheless, my feelings are still the same whenever I enter the airport. These moments are quite fascinating to experience, so to remind myself of them, I decided to dedicate this small assignment to the airports.
Data Search and Code Implementation
Finding the data about the airports was not as challenging as I expected. Although I could not find it at first, and the websites that I tried to download it from were blocked for some reason, I immediately decided to look for the data on GitHub, and I found it relatively quickly. Thankfully, it was already pretty organized, so I did not need to edit the file in any sort of way. Just to familiarize myself with how data upload in p5.js works, I watched the videos of TheCodingTrain from this playlist.
As my favorite time to catch a flight is night, I decided to make the background black and the ellipses representing the airports yellow. I used the wonderful function map() in my previous assignment, so it was fairly easy for me to implement it here to adjust the longitude and latitude to the dimensions of the canvas (to x (width), and to y (height) respectively).
The part of the code that I am proud of the most is the design part. To make some add-ons, I decided to add the ability for users to look for the airports in the specific country by inputting the 2-letter country code (my CSV file had the column dedicated to it). For that, I decided to add the input window, format it in a way to correspond to the colors of my sketch and make the ellipses change color and grow in size if the airports are stated under the country code name in the file. I also decided to implement the console text output by adding the button. When the user types in the country code and clicks the button, all the names of the airports inside that country are displayed in the console. The button is also very well designed thanks to the functions mouseOver() and mouseOut().
// if user input the existing country code, highlight the airports in this country with green
if (country_code === input_country_code) {
fill('rgb(0,255,0)'); // Green for matching airports
noStroke();
ellipse(x, y, 2, 2);
} else { // by default all yellow - nice color reminding of the night flights
fill('rgb(255,255,95)');
noStroke();
ellipse(x, y, 1, 1);
}
/* if (dist(mouseX, mouseY, x, y) < 5) {
console.log(one_airport_name)
} */ // idea of displaying airport names when pointing at them on the canvas
}
}
function show_airports() {
console.log('Airports in this country:');
// If user not only input the country code but also pressed the button, display the names of airports in this country in the console
for (let j = 0; j < airportsCSV.getRowCount(); j++) {
let iterating_country_code = airportsCSV.getString(j, 'country_code');
let iterating_airport = airportsCSV.getString(j, 'airport');
if (iterating_country_code === input_country_code) {
console.log(iterating_airport);
}
}
}
function highlight_button() { // changing style of the button when mouse is over it
button.style('background', 'rgb(255,255,95)')
button.style('color', 'black')
button.style('border', ' 0.1px solid rgb(0,255,0)')
}
function default_button() { // default style, whenever the mouse is not pointing at the button
button.style('background', 'black')
button.style('color', 'rgb(255,255,95)')
button.style('border', ' 0.1px solid rgb(255,255,95)')
}
Conclusion
Honestly speaking, I did not enjoy this assignment as much as I did the previous ones. This assignment was quite straightforward in some sense, and, in my opinion, visualizing data is not as cool unless you know the advanced-level programming that can help you make art out of the letters and numbers. Nevertheless, I liked working on my sketch, it gave me a nice perspective on how to combine working with data and coding in p5.js. I also learned how to work with text input and output, so I am happy with the result I have.
To further improve my work, I was thinking of displaying the name of the airport whenever a user points with the mouse at it. I even started coding it, as you can notice if you look at my code (I used // for some lines, but you can remove // to see how it works), but for the sake of time, I decided to leave this idea for the future. I also had some ideas in my mind, for example, adding the zoom-in/zoom-out options, or maybe even adding some animations of planes flying from one airport to another. I also thought about visualizing the busyness of the airport by making the busier airport look different, but I decided that it would be too much as I wanted to stay minimalistic.
Overall, it was a nice assignment, maybe not as creative as the previous ones, but also very useful! Can’t wait to start working on my midterm project!