Web Interactive Experience - 5 Projects (2017)

Coffee Coffee / Color Me / Into the Memories of Disney / Cities of Memories / Play Your Own Drum

These 5 websites are selected works from the courses - Web Advanced: Javascript, and Creativity & Computation Lab. They were built with Javascript, mainly p5.js and jQuery. These websites are for playful interactivity containing useful information, coloring game, audiovisual experience, reminiscence, and virtual drum machine.

For the best use, Chrome browser is recommended.

Coffee Coffee

Coffee Coffee contains fun and useful information of coffee. It includes quotes about coffee, explanation of different kinds of coffee, recipes, information of famous coffeehouses in NYC, and other quotes from coffee essay. Different contents are generated when the page is loaded or buttons are clicked, so that users can see the different information and images. JQuery, Tracery, and Markov were used. 

Color Me

This website facilitates real-time interaction between users in remote by using socket.io. Published in heroku, the website allows users to color the characters of Wes Anderson's films. Users can pick a character and color they like, and reset and erase functions are also provided. Users can collaborate to color the characters using different browsers or different devices at the same time. This website gives a feeling of connection and collaboration with fun activities. 

Into the Memories of Disney

This website bring a reminiscence of Disney animation. Using p5.js, the website plays scenes and sounds of each animation when the user presses A to Z keys. For example, if a user presses A, the main scene of animation "Aladin" is played and "A Whole New World" song is coming out. With this playful functions, users can enjoy the memories of Disney animations. 

Cities of Memories

This website uses Google Map API and OpenWeatherMap API to load content dynamically. It contains the map and weather content of the cities I visited. Once the user picks one city among the list and inputs, then they can see the real-time weather by clicking the city in the map area.

Play Your Own Drum

This playful website is a virtual drum playing machine. By utilizing jQuery and p5.js, I used preload function to load each drum sound, and keypress function in order to play sound and present gif image when specific key is pressed.