When the user leaves, the ellipse stays there which shows a trace of all the users that have been active on the page.Īlong with sending the x & y coordinates, I also sent along to PubNub the RGB values of the user’s nose ellipse. The code then loops through the array and draws an ellipse with the received/sent coordinates of the user’s noses. Two noses chasing each other on the page. Upon every time a message from PubNub was received I would check to see if their ID was in the array and if so then I would update the coordinates of where they are on the screen. If there was a new nose, that user would be added into the active user array of “All Noses”. Upon receiving the subscribed data I would check to see if there was a “new nose”. I chose a nose because it is the center of the face, and most accurately depicts where the user is in relation to their screen. I connected my code of the nose to PubNub and sent the coordinates of my nose. The code then takes the average of all the user coordinates and draws lines to the average point of all the cursors. In this example, every user loaded on the page sends the x and y coordinates of their cursor on the webpage when they click. I followed along in a previous example from my Creation and Computation class in the fall that tracks how many users are on a webpage using PubNub. I then found the x and y coordinates of the nose and connected my page to PubNub to publish and subscribe to the position of the ellipse. Starting with Shiffman’s code for tracking the nose, I used this to create the ellipse that follows the nose along with the user on the open browser. I had previously explored PoseNet in my Body Centric class in this blog post here where I expanded upon this concept.įor this project, to emphasize the ubiquity of the webcam, I wanted to explore what would it look like to have multiple people be visualized on the screen together. These examples with PoseNet are interesting because it uses the body as a controller. There are a few different examples of how to expand on this data with P5, such as creating a light nose. The most interesting (and surprisingly simple) part of PoseNet is that it simply changes your body into what could be perceived as “cursors” on the screen (x & y coordinates). In his example, he visualizes a nose through an ellipse that follows the nose along with the user on the screen. I followed along on Daniel Shiffman’s Coding Train tutorial where he explores the concepts of what is PoseNet, what is the data that is given, and how can you visualize the data. This creates a spatially aware sensation by either encouraging others to follow other “noses” or for users to move away and create their own space on the browser page. The tracking allows for users to be aware of the physical position of where the other users are. This project tracks the position of the nose on every unique browser page and shares the data amongst the connected users. Through PoseNet I wanted to explore networking with computer vision to visualize multiple people watching a screen together. Working App Link (If by yourself for testing, you can use your phone as a second webcam) Nose tracking using PoseNet and PubNub
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |