PROJECT B: WANDERLUST WONDERS
live project link:https://sharren-tanuwijaya.github.io/PROJECTB/PROJECT-B/title.html
In this project B, the project that i made is based on my hobby which is traveling. I wanted to share about my journey in traveling, how I portray it on my bucket list and also make an interactive travel information for the users. The travel information will be based on my bucket list; the countries that I wish I could go to. On the first page, it will be the title and a button that will bring you to the traveling journey. Next, the page will show you the memories and pictures of where I have traveled to combined with the list of the countries that I wished to visit. The next page will be the interactive page, where you can press the number 1-7 that makes the airplane move and go to the location that is on the bucket list. There are also buttons that can be pressed followed by the country’s name. Inside the countries page, it will give you the country’s authentic food and famous places. There are also interactions where you can press and listen to the background music or animals sound also languages from the country.
The process starts from thinking about where I should start first. And then I started from the interactive earth page. I asked professor Leon and he taught me how to use the lerp method. The lerp method is an alternative to adding speed to x coordinate. This lerp made the movement of the plane more smooth. The plane will move from this.x to this.goal x.
Next I made the links that’s attached to each country’s html link. I struggled on this code because I am used to attaching a html page in a html page, but for my project it needs to be connecting the html page in a p5 canvas. Thank you to Carrot for helping me and giving a solution on how to do the coding for this part. The next is to make sure everytime i press a different number, only the link related to the number will appear and the other link will disappear, in this case I use try{} and finally{}. This means that when it draws the sketch, the program will first try the codes under the try method and then the code under the finally{}. If the code doesn’t work in the try method, the code will immediately rin the finally{} method.
After finishing the hardest part of my coding, I moved to photography animations. This page doesn’t have any interaction except the clickable button that leads to the other html page. On the photographs animation I use the if statement and msSinceStartofsketch, so since the start of the sketch the photographs will appear according to the number put in the if statement.
Last, after Im done with the big picture of my project, I move to each pages of the countries and think about the interactions that I wanted to give to the audience. In Hawaii, the audience can choose the background music. In canada, you can listen to Canadian animals’ sound. In Germany you can listen on how to pronounce german words. In Norway, you can see when the snowman meet each other the yellow lights on the background will appear.
If I have a chance to improve my project, I want to add more interactions in the countries page and make the UI in each page more nice. Moreover I would like to put a “next” button on each country’s page instead of putting the “back” button only, so people can easily go to the next page instead of pressing the back button and pressing the country’s button again and again. I also want to improve the title page to make it more animated instead of a static image. As what I received during the presentation day, I would like to make the bucket list image to be not seem clickable
Last but not least, I would like to say thankyou to Professor Leon that have taught me alot of stuff about coding and give effort to make me understand the things that i struggle with. Thankyou to Carrot and Jiapei who have patiently teach me on how to solve my coding problems and help me in this project.