An interactive website that produces infinite scenes. Created with Google Map API and Flickr API as well as Photoshop, HTML, CSS, and Javascript.
I tackled the question of "What are activities in everyday life that incorporates a lot of repetition but yields different results?"
My thought stream took me back to when I lived in South Korea where I was always stuck in one place. I was never old enough to drive. However, a whole new world opened up to me when I started driving in college. Being able to drive to different places without paying a lot of money for plane rides or just being able to speed through the quiet highways at night, driving gave me a sense of freedom. It almost felt like checking off where I explored and made me excited for where I could go next. I wanted to simulate this feeling through my webpage.
Instructions:
When you enter my webpage, you are placed at the driver’s seat overlooking a scenery. Your car navigation is helping you stay on the road. Your trusty Baymax, always with you during your trips, tells you where you are (in case you forgot where you were driving!). When you’re done enjoying this view, you can always touch your wheel to move on to your next amazing adventure.
The scenery is brought in through Flickr. I brought in geo-tagged pictures with the search word “roads” because, you won’t be driving in the middle of the ocean, right? The geo-tag is important because then I could find the latitude and longitude of the picture. With this information, I created a styled Google Map that is zoomed into the picture’s location. I placed this on top of the background picture. Then, I brought in a picture of my car. However, the picture was not long enough to fill the whole screen. So, I ended up drawing the rest of the car, with the addition of Baymax because otherwise it seemed too empty. To add extra flair, I animated the picture so that Baymax would move. Lastly, I took the location info I got from the Flickr picture and used GeoNames to find out which Country the picture is from. I created a text next to Baymax to display that information.