[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

[pcomp week 6] Allergic to Love, Joystick Version (serial communication)

2015-10-14 00.00.59

I ran into a lot of problems this week!

While doing this week’s labs on serial communication, lots of weird things kept happening — it would work sometimes and not other times, my computer crashed, Arduino couldn’t find the right port…

A few hours in, I realized that 95% of my problems were because I kept forgetting to turn on and off the serial monitor in P5. Even when I realized this I would forget to do it, or do it in the wrong order. This was very irritating.

Eventually, I got it sorted out. In the labs, it was suggested that we wire up one button and two potentiometers. Luckily for me, the joystick that I got for this assignment was literally those three things in one, so once I figured out the code on the Arduino side, I could easily move it into my p5 sketch.IMG_0500

The sketch I decided to add a sensor to was a game I made the other week in ICM, Allergic to Love. In the original version, you use your mouse to move your character along the x-axis, and then clicked to shoot your laser. Using a joystick to replace the mouse was fairly straightforward. The pot in the joystick that controls x-axis movement would replace mouseX, and the button on the joystick would replace mousePressed.

(This joystick also allows you to control movement on the y-axis, and even though this particular game doesn’t require it, I decided to keep that code in just in case in the future I decide to add some kind of movement up and down.)

Like in the lab, I made an array of data in P5 for the 3 sensor inputs: x, y, and button press. The P5 code using the sensor data ended up looking like this:

function serialEvent() {
  // read a string from the serial port
  // until you get carriage return and newline:
  var inString = serial.readStringUntil('rn');
 
  //check to see that there's actually a string there:
  if (inString.length > 0 ) {
    var sensors = split(inString, ',');            // split the string on the commas
    if (sensors.length > 2) {                      // if there are three elements
      if (sensors[0] == 539) { 
          cannon.dir = 0
      } else if (sensors[0] < 200) {
          cannon.dir = -1
      } else if (sensors[0] > 900) {
          cannon.dir = 1
      }
      buttonPress = sensors[2];      // element 2 is the button
    }
  }
}

You can see how I made sensors[0], the x-axis, change direction depending on input, and how I set sensors[2], the button, to a simple variable.

It’s pretty fun to play the game with a joystick. It definitely makes it feel more arcade-y. Even though I had to make it a bit easier to accommodate the joystick, it’s still pretty hard!

My P5 code and my Arduino code are below.

Continue reading “[pcomp week 6] Allergic to Love, Joystick Version (serial communication)”