Name of the project: Food Trip
Group members: Emily & Frances
Link of the project:http://10.208.8.141/~zq404/foodtrip/map.html
Description of the project:
- “DIY bubble tea”
- “Draw a unique hamburger”
- “Snap as a French Fries”
We first just decide to make a little website about food only for entertainment and aims at people of all age. However, we then find it hard to design a website that appeals to every body and we want to find a meaningful social benefit for it, too. Fortunately, after the class proposal, thanks to Cici and Alvin’s suggestions, we finally figure out what we really want to make–an educational website only targeting on kids. It is not a limitation but rather, an opportunity to make our project more specific and more concrete. After working out an initial plan, we then divide our work mainly into two parts–coding and photoshop, I am mainly responsible for the coding part while Frances doing the photoshop. But it does not have an absolute line, in other words, we do everything together and it is a fantastic cooperation. 😊
How our project works:
As what I mentioned before, our project will first have a page for user to select the character they like and then it will begin with the first one–“DIY a bubble tea”. This one mainly applies p5 and user can choose whatever ingredients they want, including sugar and ice. The best function is what I learnt in Jiwon’s workshop! The color bubble!
But after clicking on the “pack it” button, there will be a pop-up window at the side telling you that the bubble tea is actually not healthy and kids shouldn’t drink them too much. Playing this little game online is more than enough 😂.
The pop-up window and when you onmouseover, there will be another animation telling you it is actually incorrect.
And after clicking on the button next, user will go to the second page, which is “Draw a unique hamburger”. This part involves p5 again and also a tiny community. For this part, we use filter effect and also critics from our users. And user is also able to save the drawing they draw to their desktop with the filename “hamburger”.
And when user click “finish drawing”, there will be a pop-up window again and if continues, there will be page three which utilize webcam. User are able to take photos of themselves and the image will automatically become the “brand” of a cute French fries.
And at the end, we will have a map page again so that user can choose to play which part they like again and again ! ☺️☺️☺️
We really wrote a lot of codes this time and this is really a challenge to both Frances and I, I think in total, there are nearly one thousand lines or even more 😭 but it is really also a big break- through!
(screenshot of a little part of the coding which is about give a button a value and put it in an if condition to control)
In general, I think our project is very successful because the final effect is very satisfying. Though there are still some regrets like we fail to figure out how to make user’s drawing appear at community which is really a pity. But in all, I really like this project and I hope that it is a perfect ending for my communication lab journey! ❤️❤️😊❤️❤️！