TUBEMAN IS HAPPY!

an interactive web experience


Tubeman is happy! is an interactive web application. The users can use it to create, download and share gifs of themselves moving like a tubeman. By encouraging the users to imitate the tubeman and enabling them to create and share gifs of themselves moving, Tubeman is happy! is trying to create simple and sharable happiness.


 

Project Overview

Key Words

Interaction Design, Web Development

Toolkit

Adobe XD, Illustrator, WebRTC, WebSocket, Node.js, Javascript/HTML/CSS

Time Frame

4 weeks

Showcase

ITP Winter Show, 2018

My Role

Interaction Designer and Web Developer

 
Screen Shot 2019-06-11 at 10.22.14 PM.png

 user flow

 

1

When entering the web application, the users will see an image of the tubeman. They will also see themselves in a camera feed.

 

2

Following the instruction, they will then imitate the movements of tubeman (as shown in the picture), pose and take 18 pictures.

 

3

Users can add a word to describe their moods at the moment.

image-asset.png
 
image-asset (1).gif

4

At the end of this experience, a gif will be generated.

 

5

The users can access to the gif by entering emails of themselves and then be able to share that “stupidity” and happiness with others.

image-asset (2).gif

 WHY DO I WANT TO MAKE IT?

Tubeman always moves in a weird yet entertaining way. However, it shares some strong and magical happiness through its movements.

Happiness can be subtle and simple. I have noticed there are many simple things in life that easily makes people happy. Like a smile from a stranger on the street, a weird shape cloud in the sky, as well as the funny movement of a tubeman.

Technologies have made it simple for us to share moments in our lives with others much easier. Living in a social media era, it is natural for us to capture moments in our lives and share them. By sharing a photo of us in a certain time and space, we also share our emotions and connections to that physical space to people in another place.

Therefore I want to create an experience in which people can share a form of simple happiness easily to their families and friends through technologies. This idea leads me to create “Tubeman is happy!”.

By encouraging the users to imitate the tubeman and enabling them to create and share gifs of themselves moving, “Tubeman is happy!”is trying to make people happy while allowing them to share that happiness to others.

Screen Shot 2019-06-11 at 10.22.14 PM.png

 Tubeman Character Design

 Interface design

Screen Shot 2019-06-11 at 10.22.14 PM.png

 Exhibition

I developed this project on my MacBook and showed it during the ITP winter show in a larger scale as a “gif booth” installation. Hundreds of people have visited my project, moved, laughed and had fun.

projectsetup_e794bbe69dbf-1.png

Here is a glimpse of the HAPPINESS!


 
tubeman.gif
 

 Technical Development

My development of this project went though a few stages.

👉 Make gifs from computer camera stream (gifshot)

👉 Add text to the gif (gifshot)

👉 Add sample movements image array for the user as reference

👉 Enable email sending functions (emailjs)

👉 Build a server (nodejs) and polish the website by modifying the javascript, html and css files