Live Web

Live Web

[Live web]Final Proposal

yining ·

For live web final project, Tanya and I want to create an interactive story that people can participate in by using different controllers. So first, we will make a public web interface that lives on a big screen. Then we will ask people to use different controllers to move the story forward. We were inspired by human antenna circuit below. For now, when two people hold hands together to complete the circuit, the led will light up. We want to invite people to hold hands together and something interesting will happen on the web interface too. 

[video width="1280" height="720" m4v="http://www.yining1023.com/wp-content/uploads/2015/11/IMG_6091.m4v"][/video]

We explored other types of controller too.

  1. Hand LED Controller
  2. FSR
  3. Phone (shake/wavy motions)

We tried FSR control a rectangle in the webpage(the example from last class), that is fun too. We are also very interested in the idea of using phone as a controller. Because in this way, people who are at different geolocations can participate in the story too.

Here's system diagram 1.0:

          Web Interface(index.html) ← Server(server.js) →Client(client.js)

           → 1. Serial Communication → Sensor on Arduino(arduino sketch)

           → 2. Mobile Browser Interface (index.html)

Next step will be:

  1. Think of the stories we want to use
    1. fairytale?
    2. more feedback on that is
    3. ask people what do they think about holding hands together
  2. Making a web interface (screen)
  3. Get the controllers to work with the web interface

Live Web

[Live Web]Why is Slack successful?

yining ·

For this week's assignment, I chose Slack. What amazed me about Slack is that it's based on a traditional interaction, messaging, and it looks like any other chatting tools, but it's a huge success today among many similar chatting tools. So I'm interested in finding out why Slack is so successful. Slack reminds me that even with a traditional interaction, if we put it into specific context, and add features around it, it still can be a huge success.

First of all, to me, Slack is a team collaboration tool. Its audiences are people working on projects or at offices. Here is an article from New York Times says, Slack is the office messaging app that may finally sink email. Here are some features of Slack.

  • Slack offers persistent chat rooms organized by topic, as well as private groups and direct messaging.
  • All content inside Slack is searchable, including files, conversations, and people.
  • Slack integrates with a large number of third-party services and supports community-built integrations. Major integrations include services such as Google Drive, Dropbox, Heroku, Crashlytics, GitHub, Runscope and Zendesk.
  • Slack also has voice, video, and screen sharing. Slack also added Emoji Reactions and user groups in 2015.

Slack works across every device you use. It provides mobile apps for iOS, Android, and Windows Phone (beta), in addition to their web browser client and native desktop clients for Mac OS X, Windows, and Linux (beta). Slack is also available for the Apple Watch, allowing users to send direct messages, see mentions, and make simple replies.

Slack has experienced rapid growth since it was first released. In February 2015, the company declared that it was adding around 10,000 new daily active users each week, and had more than 135,000 paying customers spread across 60,000 teams. By April, those numbers had grown to 200,000 paid subscribers and a total of 750,000 daily active users. In 2015, Slack passed more than a million daily active users.

Here are some of my ideas that why Slack is a huge success.

  1. From human-centered design perspective, instead of creating a whole new human habit, it's based a behavior that people are already used to, which is email. We already know how to use email, it's very easy for us to get familiar with Slack.
  2. It's perfectly suited for work, because it integrates with many third-party services, like GitHub, Google Drive and Heroku. It's especially convenient for programming team, for example, whenever someone updates code in GitHub, Slack will generate a post in the chatting group, and people can comment the post. I personally found this feature very useful.
  3. Slack has a very powerful searching engine. Everything in Slack—messages, notifications, files, and all—is automatically indexed and archived so that you can have it at your fingertips whenever you want. Slack also indexes the content of every file so you can search within PDFs, Word documents, Google docs, and more. This means that Slack will have a whole history of all your communications, and it's much clearer than email box.
  4. Slack represents a new working style at office. It encourage team work, collaboration, communication and more transparency at the office.

 

 

 

Live Web

[Live Web]Midterm proposal

yining ·

My idea: I want to make something that allows people interact with HTML element through webcam. When people move their heads from left to right in front of the camera, they can control the movement of an avatar in the browser. When people move their hands, they can turn to the next page in the browser.

Moreover, I'd like to make a keyboard & mouse free space game. It's also a multiplayer game. Some players can be UFOs on the top side of the screen to shoot down spaceships. Other players can be spaceships on the bottom of the screen trying to survive. Here's my sketch.

IMG_5932

  1. Players allow browser to use their webcams
  2. Client program recognizes the head
  3. Client program tracks the movement of the head / hand
  4. Client moves the avatar around

For multiplayer games:

5. Client sends the current position data(Y axis data) to the server through socket

6. Server broadcasts all the positions to every client

7. Client gets the data, filters out it's own data, updates other player's position

Some research:

I found this Javascript library headtrackr for headtracking via webcam and WebRTC/getUserMedia very useful. But I have a feeling its tracking sensitivity might not be good enough for a game. But I will try my best. I also found this very cool JS library: Webcamwiper. It looks like the its very responsive.

I'm still not sure about tracking the movement of the head or the hand. I'm looking for some suggestions.

I'm also thinking to make the video itself.