Live Web Final Project: Teach Me Something

For my final project, I decided to focus entirely on creating a tool for teachers and students to collaborate on a whiteboard and learn together. I believe having access to video/audio enables the teacher detect facial expressions/body language and better understand when the student is confused or having trouble understanding a concept. This project uses https, WebRTC,, peer js, and p5 canvas.

Special thanks to Alejandro Matamala, Vidia Anindhita, and Bruce Nguyen for your help and patience! Thank you!

Final Proposal : Continuation of Live Chat – Horoscope Compatibility

Update 11/19:

For the Final, I plan to continue working on my Horoscope Compatibility Match. I want to use all the elements I’ve learned in this class: Https, Live Chat, Live Canvas drawing, WebRTC, Peer.js, and databases if I can. I’m a bit concerned for time because of NIME, so I will do as much as I can but minimum I have to get canvas, video/audio chat working. So far, I’ve been able to do these separately, but everything seems to break when I try to put them together. I know I’m really close so I look forward to finishing this project and hope I can implement user testing when I am finished.

This is how the chat will look like after two students are matched and start collaborating on a canvas:

Besides collaboration, it can be used for teaching, communication with people who speak different languages, an accessibility tool, etc.


Last week’s assignment was to get familiarized with Node.js on Digital Ocean and extend the example live chat application into something more fun. I like that Shawn’s approach for all our homework assignments are to make things fun and silly, because I typically associate coding with dull, confused, and frustrated sentiments. I realize however, those sentiments inevitably arise because my ideas always seem straightforward in my head, but tend to be ambitious and difficult to implement in code.

First idea: Jinx! Personal Jinx!

I thought it might be fun to create a chatroom that penalizes users based on the rules of Taboo and playground game Jinx. Everyone who joins the chatroom is invited to contribute to a topic likely to trigger them into typing the same keywords. When the same keywords are detected between two or more users in the chat, a prompt will appear on each of their screens, giving them the option to jinx the other users. Whomever clicks the Jinx! button the quickest freezes the others out of the chat. The objective of the game is to figure out the keywords and manipulate as many other users into typing it within a designated time frame, and/or be really fast at clicking the Jinx! button when the prompt appears. Last man standing wins.

If you don’t know the game, you can reference the wikiHow article here. [Side note: Apparently wikiHow illustrators do their illustrations by tracing stock photos. That’s why they all have that I’m smiling but I’m really dead inside look about them.)

I still think it’s a fun concept, but in the process of brainstorming with resident Alejandro, I thought of another fun idea:

Horoscope Compatibility Match!

The problem:

I notice that in a lot of my classes that involve collaborative projects, professors will pair up students by running names through a randomizer. Typical of leaving fate up to chance, some collaborations are more successful than others, some can get downright ugly. Well, what if horoscope compatibility charts actually had some merit? I personally don’t believe in this pseudoscience hocus pocus, but I know there are many people that do. I have several friends who have taken notice of patterns in the people they befriend/date, and feel reinforced by their choices because of the fact. Therefore, I wonder if we can be slightly more strategic about pairing together students from the get go? Unsuccessful collaborations tend to involve the clash of egos and ideas, lack of communication, and build up of resentment over imbalanced division of labor. These astrology compatibility charts tout that given certain signs possess similar personality traits and priorities, they are able to foster better relationships, communicate with one another, and make compromises.  Is it possible to create balanced, compatible teams so that not one person ever feels the overwhelming responsibility of doing all/most of the work? I think it’s a worthy cause to find out. I want to conduct an experiment and follow-up study comparing experiences from teams formed from a randomizer versus a randomizer that takes horoscope compatibility into account. 


Our personalities are definitely more nuanced than our birth months and whatever stars and planets are rising, aligned, in retrograde, blah blah blah. On the other hand, I can’t help but be reminded of Malcolm Gladwell’s case study on the relative age effect in respect to Canadian ice-hockey players. Could there be something there? In all honesty, I doubt it, but I will develop this project further because it makes for a good learning platform to build upon the weekly homework assignments for this class . At worst, this project makes no considerable difference but gets a laugh from everyone who chooses to participate. At best, people are paired with more compatible people to collaborate on interesting projects. For me, that’s a win-win.

What I want it to do in pseudocode:

  1. All students join the chatroom.
  2. They type in their name in the text field, choose their sign from the drop down menu, and click submit.
  3. Program collects the person’s data (user’s name and sign) and pushes it into an array containing all the people.
  4. After submit is clicked, the amount of people who have submitted their signs are logged and broadcast to everyone.
  5. To find a match, the program will need to loop the user’s sign through the signs in the compatibility list array to find the signs of all the people that are compatible  with the user, making sure not to match the user with him/herself if his/her sign is also a compatible sign of his/her sign. When the user clicks the Find my match! button, the program will return a random person from the array of all the people that are compatible with the user and broadcast it the user.

With the help of my favorite people, here is where I’ve managed to get the project up to so far:

I put it on my Digital Ocean, but for some reason, the matching function only works on my local server so one more thing to debug! Here is a screenshot to get the idea.

To Do:

Debug: Currently, the users are matched up with a random person from the list of all the people with signs compatible to them. I need to configure it so that two compatible people get matched to each other. I am still thinking this through…

What it *hopefully* will do as the project develops:

  1. Users that get matched together will be transported to their individual chat rooms.
  2. They can draw on a “whiteboard” canvas together to brainstorm ideas for collaboration. (Class 3)
  3. They can see/hear each other over audio/video. (Class 4/5)
  4. Link to a Google survey to rate the compatibility of their team member, the quality of collaboration, whether they noticed a significant difference between this matching tool versus a randomizer, if they believe in horoscopes, etc.

Additional Notes:

To get my compatibility list array, I compared the top three cheesy charts that came up on my Google search results, attributed three compatible signs for each sign, then compared it to a few more charts to make sure they check out and eliminate any potential unfavorable matches.


Special thanks to:

Alejandro, Mithru, Lin and Lin’s husband, Joey, Jenna, and Shawn.

You Are What You Watch:
Interactive Self Portrait

I have a nightly ritual of watching Youtube videos before going to bed. Looking at my YouTube suggestions, I noticed that what puts me at ease before losing consciousness can be divided up into four categories: Cooking/Food, Animals/Animal Rescue, Parasites, and Humor.

As you can see, I’ve been hardcore getting back into Seinfeld recently. I think these categories are pretty indicative of my personality so I decided to take the basics of what Shawn went over in class to create a page with a video from each category, so I can just open this up before bed and choose whatever I’m in the mood for. For now, I’ve just downloaded one video per category, but eventually, I’d like to learn how to compile playlists for each category and be able to shuffle and receive new content from the channels I’m subscribed to. This is the first iteration of it:

When the categories are clicked, it triggers the video.



It looks pretty sad and embarrassing, which made me laugh so I decided to make it prettier. This is version 2:



Thank you Mithru for your help!


From 2010 to 2012, Chatroulette was a thing. It was a popular past time to gather around a laptop with a group of friends and get randomly paired with strangers on the internet for a video chat. You heard stories from friends of friends about someone who matched with some hot guy from Europe, had the most amazing conversation and continued to stay in touch with each other until eventually, s/he bought a plane ticket to visit her/him. (Talk about a meet-cute!) Videos of celebrity sightings on the site also surfaced and went viral, and you got to see amazing stuff like this every now and again:

Chatroulette is a live video-chat website that pairs random strangers from around the world. Users can enable their web-cam and/or microphone in addition to the text box to communicate with one another. It was developed by a 17-year-old high school student named Andrey Ternovskiy, who wrote its first version in “two days and two nights”. How it works is it utilizes Adobe Flash’s peer-to-peer network capabilities—RTMFP (Real-Time Media Flow Protocol) to allow multimedia to efficiently traverse between users’ computers without using server bandwidth.

Although the site is still active today, Chatroulette received criticism and backlash within the first year of its launch and gradually lost its popularity when it became the obvious choice for people to exhibit offensive, obscene, and pornographic material and acts. According to this Verge article, there persists a small community of male users on Chatroulette. I know part of the assignment is to try it out, but I’m going to take a hard pass…