[live web week 10] final project idea: kitchencam

kitchencam-mockup

For my final project, I’m interested in creating something that will allow for random people on the internet to control one particular thing in real life. Before I talk specifically about my project idea, I’ll talk a bit about my references.

REFERENCES

The Telegarden

telegarden-8x6-72dpi

The Telegarden is an art installation that allows web users to view and interact with a remote garden filled with living plants. Members can plant, water, and monitor the progress of seedlings via the tender movements of an industrial robot arm.

Twitch Plays Pokemon

twitch-plays-pokemon.0

Twitch Plays Pokemon was an experiment that allowed for internet users to collaboratively play a game of Pokemon Red by controlling what happened in the game via chat.

Jennicam

jennnn

Jennifer Ringley was one of the first “lifecasters,” using a webcam to take a photo of her bedroom every 15 minutes for years. It was a way for anyone on the internet to see what was happening in one person’s daily life.

MY PROJECT

What I want to do is set up a webcam in my kitchen. I’ll build a webpage, where anyone can go and see what’s currently happening in my kitchen, but they will have to click a button that takes a picture first.

I think this is an interesting idea because it’s a little different from typical “lifecasting” or livestreaming. It’s easy to be voyeuristic on the internet, just by stumbling across anyone’s personal livestream. But because the user has to click a button to capture a photo and see what’s happening, the user is a little more complicit in the voyeurism.

Personally, I’m not interested in being particularly exhibitionistic (in the bedroom style of Jennicam), but I figured getting to look into someone’s kitchen at any point in the day feels somewhat intimate. You can learn a lot by seeing what someone does in the kitchen – seeing how they make their coffee, whether they’re cooking or microwaving leftover takeout, why they’re eating cereal at midnight or drinking at noon.

TECH

I’m not 100% sure how I’ll build this out, but I imagine I’ll use a Raspberry Pi or something similar for the webcam and use socket servers to connect to a webpage. We’ll see…!

[live web week8] recreating an older socket project with webrtc

Screenshot 2016-03-30 10.06.00

Screenshot 2016-03-30 10.06.07

(URL here.)

This week, I simply recreated the chatroom I made a few weeks back using peer.js instead of socket.io. The difference now is that you have to call the other person/people, but otherwise it works in the same way. Much more simple, but maybe less interesting?

https://gist.github.com/nicolehe/914464b275e963205fc9e278a5da574e.js

[live web week 6] midterm: swap chat

Screenshot 2016-03-09 10.26.21

Try Swap Chat here.

For my midterm, I made a chat room that takes a picture of somebody else in the room whenever you submit a message. I built it off of the Face Chat from the other week.

One of the first things I added was a thing to tell you how many other people are currently in the room. I kept track of the client count in a variable in the server-side code, and added to it every time a new person joined the room. Once they disconnected, I removed a number, and I sent this updating number over to the client-side, which shows it on the page.

In order to take a picture of a different person in the room, I made an array of all the clients’ socket IDs, and added someone’s ID once they joined, and then removed them once they left.

I knew I had to pick a random ID from the ID array in order to take a picture of that person, but I didn’t want the user getting themselves, so I made another array called notMe[] of all the IDs in the room except for the user’s own ID on the client side. Then sending a message looked like this:

function sendmessage(message, randoPicked) {
//pick a random person each time
randoPicked = notMe[Math.floor(Math.random() * notMe.length)];
socket.emit(‘chatmessage’, message, randoPicked);
}

From there, I executed the picture-taking code, and added that photo to the text that the original user sent.

There were a couple other extra things I added in order to make the chat experience a little better, like the floating text box, and the auto-scrolling to the bottom of the page once new data is added.

There are still a lot of CSS related things I’d want to change so that it looks better, but getting all my divs lined up properly is a task beyond me right now. I also want to add something that prevents people who don’t allow a camera on the page to not be able to access the content.

Screenshot 2016-03-08 21.07.34

I’ve only tested it myself with two cameras, so we’ll see what happens once more users try it……

See Swap Chat here.
https://gist.github.com/nicolehe/7e1851098f751d7a1609.js

[live web week 5] midterm idea

For my midterm, I basically want to keep building off of the project I made last week (which itself is built off the project I made a couple weeks ago), but with some improvements and a twist.

I want to make a chatroom with a text box that also takes a picture when you submit. But instead of it taking a photo of you, it will take a picture of someone else who’s also in the chatroom.

Theoretically, this should be possible through sockets (I believe), but I’m slightly unsure about the feasibility mostly because I’ve never seen anything else that does this on the internet. Hopefully that’s just because it’d be too creepy to implement on any real website, and not because it’s technologically restricted.

And I want to fix the problems I currently have with the page, including some messages disappearing and some of the photos not showing up. And hopefully I’ll also be able to wrangle the CSS enough to make it look nicer overall.

 

[live web week 4] face chat

Screenshot 2016-02-24 00.04.24

(The url for this project is here. If I’ve turned off the server, it won’t be currently running.)

Building off of the chatroom I made the other week, I added a feature that takes a picture from your webcam once you submit your message, and posts them together. It was tricky to get it up and running, and I had a lot of problems managing divs, but it looks like it generally works.

 

Screenshot 2016-02-24 00.46.49

Sometimes the images don’t post, and I’m not entirely sure why. Also the formatting of the whole thing leaves a lot to be desired. But I’m glad I managed to get it to generally do what I wanted it to. I’m interested in bringing this one a little further…hopefully I can continue working on this.

https://gist.github.com/nicolehe/903d1e619206ed6a9858.js

[live web week 3] a broken drawing thing

Screenshot 2016-02-16 22.26.00

Things did not go well for me this week for this assignment. I had a lot of trouble getting this collaborative drawing page to work, and it still basically doesn’t, even after a fair amount of work. But I figured I’ll just document my code sorrows for now and sort it out at a later time.

My goal was to let two people collaboratively draw in one canvas in different colors, with neither person’s mouse affecting the other’s drawing. This proved harder than I thought it would be. I did manage to get the drawing to only happen while the person is clicking (though it seems wonky), and for the color to be randomized with each page reload.

I made two separate canvases so that each person’s drawing would not affect the other’s. I wanted to later the canvases on top of each other, but I couldn’t get that to work, so I just separated them. Now what happens is that you draw on the left box, and it shows up in the other person’s right box, in your color.

I also made an erase button that should wipe out your own box, but for some reason the image pops back up once you start drawing again.

On the plus side, I do feel like I’m starting to get a hang of how sockets work. I’m far from mastering it, but diving in this week has made me feel like I understand it way more than I did before.

Below is my extremely dysfunctional code.

https://gist.github.com/nicolehe/23415ff7b992d527f89e.js

[live web week 2] chatroom to dispel loneliness

Screenshot 2016-02-09 22.17.38

Well this might be the homework assignment that resulted in the strangest experience for me. I did the assignment to spruce up the chat page and run it on a server in the cloud, and tested it with myself in different browsers when I was done (screenshot above).

Then I did something that was probably not advisable, which was tweeting the URL out to the public.

Suddenly, it got interesting:

Screenshot 2016-02-09 22.49.36

I hadn’t even considered what would happen if there were multiple people on the page chatting at once, but as some indeterminate number of people joined, it became this sort of intimate anonymous chat room.

Then, people started doing things that I didn’t even know was possible:

Screenshot 2016-02-09 23.11.07

(It turns out not disabling HTML/Javascript in the input box allows people do to….a lot of things.)

I’m not sure how many people were on the page or even who they were, but it was fascinating and felt really poignant to me. I didn’t expect to have created this strange little portal on this Tuesday evening.

I decided to shut it down before someone did something to ruin the nice experience:

Screenshot 2016-02-09 23.23.46

URL: http://162.243.91.198:8080/

https://gist.github.com/nicolehe/2f3b63da25b250ad850b.js

[live web week 2] Testing out Periscope

Screenshot 2016-02-09 14.07.27

So this week we were supposed to try out some kind of live media product and write our thoughts about it. I decided to use Periscope, something I’ve never done before, and it was a pretty interesting experience.

The way the app works is that it’s connected to your Twitter account, and you broadcast live from your phone. Viewers can watch, comment, and “heart,” and it’s all saved and archived so anyone can watch it after.

I didn’t really know what to expect going in. I was just sitting in my living room and started broadcasting, and people started watching.

2016-02-09 22.22.18

Immediately people started watching, and I felt a kind of pressure to perform, though clearly I had nothing prepared. I just ended up kind of talking about random things: my homework assignments, my cat, the project I did at a hackathon over the weekend. There were 3 people in the chat that I knew, and a bunch more that I didn’t. They asked me to show them what was in my fridge, so I did.

What felt strange was the way we were communicating – it wasn’t exactly one to all or one to one, but something in between. I spoke and people listened, and then they responded via chat. Then I responded to the things I read by speaking out loud. I’m sure my roommate in the other room thought I was talking to myself.

I asked people what they usually liked to see on Periscope and got a few interesting responses:

2016-02-09 13.52.01

I did not have the wherewithal to take many more screenshots in the moment, which is related to another part of the whole experience: trying to learn a new technology while being watched by a bunch of people at the same time is somewhat difficult.

Overall I enjoyed it, and can see the appeal. There were a surprising number of people who watched my stream given that nothing was happening – something like 133 total. Anyway, if you want to watch the awkward and boring archive, you can do so here.

[live web week 1] Interactive self-portrait

Screenshot 2016-02-02 18.54.32

(See my interactive self-portrait here.)

I wasn’t sure I’d be able to get this first homework assignment done in time, given that I fell horribly sick this week (as I couldn’t help alluding to in the homework itself), but thankfully I managed to pull it off today. The code will probably not win any awards for efficiency, but I’m happy to have done a simple exercise in “pure” (non-p5) Javascript, HTML5 and CSS.

https://gist.github.com/nicolehe/cb6facf4ddac8e03049a.js