Milestone 6:
2D Movement and Animation
Change: Our main change is that the bears can now move and animate in 2D space across the screen of our BearHug vidchat app. Previously the bears could only move in a 1D line and the only way to control bear movement was via 3 buttons which lead to a 3 step choreographed movement of: 1. walk 2. do gesture 3. walk-back to original spot. Now, the user can control the bear’s walking movement freely by mouse-clicking on the location they desire the bear to walk to.
Reason: This has a couple main reasons, originating in our user testing. First, we want the bears to be able to interact with the people as well as the other bear, and to be more free and natural in their movement. Allowing them access to the entire screen opens up a whole new set of interactions, beyond choreographed animations: bears can sit on someone’s shoulder or pat an actual person’s head, for example. We saw this suggested by the users who created this interaction for themselves by using the dragged images of the bears combined with Snapchat. Second, this lets both users move bears at the same time. In this way, we prevent the feeling of being “trapped” that was expressed by testers. Your bear can avoid the other bear’s gestures, or reciprocate gestures as they are made, rather than being frozen until a sequence is completed.
Implementation process: We entirely scrapped the animation code we created for our prototype I with 1D movement. Instead, we created a javascript function that moves the bear to the mouse-click position and pushes mirror-flipped coordinates to firebase so that your bear will also animate and move appropriately on the other user’s screen. This actually invovled a lot of challenges and took a lot of effort to code given there were a lot of tricky subtleties with flipping of animated gifs (left/right facing), making sure the correct bear is moved and to mirror the motions when necessary, and the timing of the chained animation switches.
Gesture Button Tracking and Toggling
Change: The gesture buttons (hug, kiss, pat) can be toggled between showing and hidden, and it follows the bear as it moves on the 2D plane so it is easy for the user to access the buttons directly below the bear.Reason: Easy for the user to access the buttons directly below the bear, which comes up when keeping HCI concepts like Fitt’s law in mind, where we’re minimizing the distance the user’s mouse has to travel between bear and buttons. Previously, the buttons were just by default at the bottom of the screen.
Implementation process: Moved the buttons into a div inside a container that holds both the animated bear and the buttons div, so that the two can move together within the 2D space. Used jQuery to toggle buttons to show and hide onclick and onhover.
Reusable Chatrooms
Change: Made chatrooms reusable. In the previous version, each time you signed on you needed to use a new roomname, since old actions would be played when you logged in. Now, you can have a single roomname, and only have relevant actions playReason: Single roomnames make it much easier for pairs of people to join a chat; rather than needing to use a second communication method to share a roomname each time, the pairs can simply set up a standard roomname for themselves, and return there each time. This lowers the use barrier, and is much more intuitive.
Implementation process: We added timestamps to each message pushed to firebase, and only play the message if it is within three seconds of its issuance. This also prevents out of date messages playing if the connection is laggy.
