Live Web – Final Presentation

Here is my presentation on the Speak Out voice protest web app.

The concept is to use the devices we already have to amplify voices at protests. One person speaks into their phone. Other people’s phones amplify that audio over a wider space, without the need for a sound system.

I went to a Transportation Alternatives protest over the summer where there was no sound system for the event speakers or organizers. It was frustrating and uninspiring. What if we could amplify ourselves with our phones instead?

Here is a demo, in which I am reading from Representative Alexandria Ocasio Cortez’s victory speech.

Live Web – Say The Same Thing Game

Here is my chat assignment, which I turned into an online word game.



A player submits a word, and waits for the other player.


The other player’s word synchronously appears when they press submit. They are told they’ve used 1 out of 3 tries.


If they match, they get a few party emojis : )

How It Works

I used web sockets to synchronously send live updates to two players as they attempt to type the same word without communicating. This is based off the game some people call Say The Same Thing, in which you and a partner say random words at the same time until they become the same word.

The prototype includes two player HTML pages and a server.js file that runs functions to compare the two players answers. If the two players submit different words, they are told to try again. If they submit the same word, they win.

For the game to really work as it stands now, I need to be there to explain how it works and time people to respond within five seconds.

Future Updates

A future version can include a live countdown of remaining seconds to the players, and add sound for a more interactive experience. There also needs to be different CSS color choices for Player 1 and 2.


My system map and wireframes.


Live Web – Protest App Midterm Project (Update)

I plan to continue working on this project idea of a Protest App. I worked slowly but surely on building the server and access to the peer.js server, and learned a lot doing so.

You can visit these pages to get the gist of my project here.

Speak – the page the event speaker visits.

Listen  – the page that attendees visit.

I mentioned in class I may not have set up my peer.js server correctly, but I think I did? The error I’m getting is below. I’ll be coming to office hours with Shawn and Alejandro.


Live Web – Chat Assignment

Get up and running with Node.js on Digital Ocean and the example Chat Application. Try to extend it a bit, make it better, more fun.

I was able to get the Chat Application up and running on my server.

As for remixing it, I’m imagining a game that challenges two people submit original responses to the same question.  For example, two users submit different words for “drinks that are carbonated beverages”, “shades of blue”, or “names for submarine sandwiches”. Two people gain a point if they submit different words. They lose a point if they submit the same words.

I have a sketch of an online interface.

I also have lots of questions in my code, which is live here – BUT by no means changed from the original code yet.


Mainly I wonder how to keep track of two client IDs, in order to compare their submissions from their respective input fields. I know you can get ID numbers, but how would you put them into an array to compare their answers?

I also plan to use the Javascript search() method to compare if the strings within the user’s submitted answers are the same or different.

I will work on this to complete the assignment.

Live Web – Live Experiences

Find a live or synchronous site or platform online. Try it out. Describe it on your blog. How is it used? What do you find interesting about it? 

Does Fortnite count if it’s a video game and not traditionally played in the browser? It is an online multi-player game, played by 3.4 million people from around the world at any given moment. That is a lot of people playing synchronously at the same time.

The most interesting part to me is the beginning. People around the world sit on their couches waiting as their Fortnite avatars on “Spawn Island”, essentially a series of air strips from which flying buses land and depart. The Battle Royale, or main game, can’t begin until 100 of these avatars are waiting for the bus. Once a “Battle Bus” arrives, it drops them over a much larger island to which they parachute and begin the Battle Royale.

Image result for spawn island fortnite

A player lands on Spawn Island, with the flying bus waiting in the upper right.

Waiting on the air strip, avatars stand still, move around to look at each other, make aggressive gestures like shooting off their guns, and most hilariously, show off the famous Fortnite dance moves.  This is also a free moment to check out each other’s purchased outfits (some people spend $20 on a new outfit).


Players dance with each other. One player barges in whipping his battle instrument, but then runs away. The dancing continues.  The battle bus is departing in 9 seconds.

To me, these unscripted moments are the most interesting. I think these moments contribute to the cultural phenomenon status of the game. They are, in some ways, the most “synchronous” moments of the game, in that people are very aware they are waiting for real people to start the game and join as avatars, and they have no game to focus on yet, and only have each other and the views to look at.

While this isn’t a browser experience, I think it would be interesting to imagine scenarios in the browser where people arrive at a pre-destination before the main event.

For example, a meeting in one browser tab, before people go on a treasure hunt around the web, and meet back in their shared tab? People could establish different identities for different purposes, and enact them with each other and elsewhere on the web.


Live Web – Self Portrait

My code is LIVE ! You can try out my self portrait at the link. Turn the sound on. Take your time doing the following, because the browser can take a moment to respond to you.

You can:

  • Mouse over media to hear sound.
  • Mouse out to stop sound. Mousing back over restarts the sound file.
  • Click media to change live feed in the background.
  • Drag media to create new shapes.
  • The mouse cursor’s shape changes to a hand to suggest to the user to drag the media.

I used the npm forever package to have this live online without opening up my terminal.

This was a great first assignment. I feel much more comfortable using javascript to manipulate the HTML DOM and CSS.

Here’s a video showing the interactions built into my self portrait.  Turn the sound up high to hear the audio.