Dancing With Strangers (Xmas Edition)
link: https://www.youtube.com/watch?v=5r9DHl_vM8Y
Background:
Inspired by the upcoming Christmas, I intended to set the theme for my project as this famous festival. In developing my midterm project: Dancing With A Stranger, my final project continued based on the posenet model, yet turning the previous human-figure based on a more abstract reflection of the body movement. Also inspired by the design of Apple Watch, the sports application in Apple Watch has the strokes of arcs that display different values. I, therefore, implement arc designs in my project to reflect the movement of the users’ hands. To further expand the user group, I enable multiple access to the server which allows more than two users to interact with my project at the same time.
Motivation:
The motivation behind this project is that I want to bring people together during a festival that means to reunion with everyone you know. With devices like computers and mobile phones, we get to celebrate the day with other users on the platform. It’s also considering the ones who are not able to reunion with their family and friends for Christmas in person, with this platform, they get to celebrate this festival in the form of music and dances with the company of others virtually. Additionally, after making Dancing With a Stranger for the midterm project, I was determined to create a platform that allows more than two users so a multiple user platform is a must for my project.
Methodology
For building the multi-player platform, I used node.js to create a communal server. To collect and display all the data tracked by posenet model, I went through the following five steps: store the data, the posenet model takes down the 7 coordinates on the upper half of the user, I stored these data into an array called bodyparts. Draw local data: I draw the figure representing the local user first. Emit data: the code sends the local data to the server which holds the collection of all data. Receive data: the code receives the collection of all data uploaded to the server. Display incoming data: the code then draws out the figures of all incoming data. For creating abstract visual for my project, I used the shoulders as the x-axis and the nose as the y-axis, the center point is the center of the figure. I then took the distance of the nose to the shoulders as the 2/3 of the radius for the outer circle and calculated the angle between the hand and the vertical line as the angle for my arcs’ strokes. For the floating Santa, I stored the previous coordinates of every 50 loops in an array and the Santa would follow the stored coordinates, the gifts bursting out of his sleigh use gravity to stimulate the actual falling. For the color palette, I used the theme colors for Christmas. To create the glowing effect around the ring, I layered many circles with different opacity.
Experiments
The road to get the multi-user platform working is rough. I started with Firebase. I successfully uploaded local data and incoming data to the firebase server but I can’t seem to access and retrieve the data from my code. I, therefore, started using node.js to build the platform. The base code I got for node.js enables multiple users to draw on the same canvas with their mouses. The hard thing to do here is that I need to use node.js to create a communal platform that allows access of all users’ webcams. I used https instead of Http and get certificates for the allowance of accessing webcams. After that, I discover that the display of multiple players’ figures is constantly flickering. I therefore separately draw the figure of different sets of data for the incoming data which helps with the flicker problem. For the visuals, I started with connecting all the coordinates to create a contour of the human, but due to the limitation of the webcam, it is never detecting the bottom half of the human body well, I, therefore, abandoned the bottom half and focused on the abstracting of the upper part. That was when the idea of using arcs came to my mind. The angles made by hands, unfortunately, didn’t lead the movement clearly so I had to multiply the angle by a certain integer. The visual part took me a lot of effort to find the best constant to display the figures.
Social Impact
Dancing With Strangers (Xmas Edition) aims at bringing the world’s lonely people together on a platform and celebrate this festival through dancing, music and the company of one another. The world nowadays is closely connected to our personal devices (laptops, mobile phones, etc.). This project takes advantage of the wide usage of these devices and creates the connection among internet users. Digital devices are often accused as obstacles in strengthening personal connections for people are hiding behind their screens all the time, but I consider them as devices that help build more connections, we get to jump out of our relationship circles and into a more public sphere. Dancing With Strangers allows this to happen by enabling everyone with the link to log onto the platform and interact.
Future Developments
For technical problems, I’ll need to create a more artistic background, currently, the background is just black. I will also need to fix the lagging caused by multiple users log in. I would also add in the coordinates of the legs since only moving with all limbs can be considered as dancing, which would require better webcam detection. Also, I would like to custom the platform for mobile phones users, for now, the platform is typically built for pc users, even though mobile phone users can log onto the webpage with chrome, they can’t enjoy the best experiences. I would also prefer to change my project a little bit, which includes simplify the visual and represent each user with a flickering light, if the user dances while logged onto the webpage, his/hers light would be blinking. The user could see themselves as lights on a world map, and each continent has a different color to represent it. The region with the most flickering light has the most people dancing at the same time.