Dihydrogen Monoxide
This project was made during Spring 2022 for my Core 2: Interaction Studio class. In this project, we had to collect data and make a table using airtable. Then our professor randomly swapped our airtables. I inherited my classmate’s airtable which was about oceans and seas.
Ideation
My design was inspired by Google Earth as I wanted the user to interact with the water bodies instead of just looking at data. I also wanted the website to have a "scientific" feel with clear grid systems, hierarchy, clean typography, and most importantly, minimal design. The website is responsive with help of media queries. On mobile, the user can view the 3D model as an AR model in real life.
Execution
After I inherited my Airtable data table from my classmate, it was a difficult task to code my JS files as I had never worked with APIs before. I'm using the Airtable API to fetch data from the data table. The JS functions are using principles of object-oriented programming with filters looking for a keyword after the div is pressed. I also made sure to make the functions with least lines of code.
For the 3D model, I am using a model of Earth from Sketchfab. Using Sketchfab's tools, I was able to embed the model and features like hotspots. On Safari mobile, users can view the .USDZ file in AR with help of Quick Look and interact with the model in their surroundings.