BumperMouse

Get a friend and test it out: https://bumpermouse.glitch.me/

Getting Started

The p5 Web Editor

I started building and exploring the primary interaction in the p5 web editor. While I knew that I wouldn't be able to build the functionality for multiple cursors there, it provided an easy way for me to explore a proof of concept and test a few questions that I had at the onset of the work. The first question to solve was how/if I could manipulate the mouse cursor. I landed on hiding the mouse cursor when a user is over the p5 canvas, and "re-drawing" a mouse cursor that I could control. Keeping the look and feel of a typical cursor, but introducing different colors felt like a good way to create a sense of play while embracing the medium of a web app.

The initial explorations in the p5 web editor also allowed me to easily write the a class for the mouse cursors, and test out a "bounce" interaction. Using vector math, I was able to first get the faux mouse cursor to slowly catch up to my cursor. After this I progressed to figuring out how to get the cursor to "bounce" off the edge of the canvas.

Stage 2

Multiple Mice

With this proof of concept in hand, I needed to move into a platform that would allow me to test code with multiple users. I moved the code into Visual Studio Code to build the server and initialize web sockets. It also got me to quickly build a very lite html site to house the work. I decided to keep a relatively small canvas and keep it consistent for all users. Given the multiple positionings that would have to be transferred, I thought this constraint would help me avoid future problems.

After building all of this out, I quickly realized a major obstacle for user testing. When opening the page in multiple windows, I wouldn't be able to see two mouse cursors moving from the same computer. In order to continue, I needed to immediately move the project to glitch (or a similar platform) so I could even test enough to build.

After moving into glitch, I needed to start to think through how best to send information between users and what to send. After attempting to send my mouse objects through sockets, I simplified to simply send through the x and y positions. With that I was able to wire things up enough to show the multiple mouse objects and reveal the distance between the users.

Things were more or less working well at this stage, except if I attempted to add in a third user, we had issues. Specifically, things began to aggressively lag. I needed to re-examine what information I was sending and to whom. I needed to rethink how web sockets were actually working. It turns out I was over-shipping. With every user's, every mouse movement, I was attempting to send information about every single mouse to and from every client. Rather than sending all of the information every single time, I only needed each client to send their information which could then be broadcast to all of the other clients. I needed to focus on sending information one at a time, and allowing the sockets to handle the multiple streams of information that were coming through.

Stage 3

Bounce Interaction

This stack overflow breakdown was exceedingly helpful to me as I worked through the vector math. With a smoothed out solution to sending information via sockets, I was able to move on to the problem of the bounce interaction. I fluctuated between having the mouse collision check run for every mouse that wasn't mine, and check it against mine OR if I should have an array of the other mice and then check my mouse against every other mouse. After trying to make the first one work, because I suspected it would be lighter weight, I broke down and re-wrote things so that my mouse was responsible for everything, other than displaying the other mouse objects.

With the puzzle pieces in place, I started to work out the vector math to determine the "bounce" of a collision. Initially, I did the math so that your mouse would hit another and then move a specific vector away from the bounce. But this led to a bounce that was very fast and difficult to control, because the mouse was rushing to get away from the initial bounce. I ended up re-working this section to actually first determine a vector point away from the bounce interaction, and then pull the mouse cursor there as a target. It was a simple shift but it smoothed out the bounce interaction in a nicely nuanced way.

While working through these problems, I ended up adding in a number of features for the sole purpose of debugging. Especially when working through the vector math and positioning, I found it helpful to simple render the labels of where the vectors were in space. This helped me better visualize what I was doing when I was manipulating points mathematically. At times I was labeling every mouse cursor with their client ID, labeling vectors, or having different "traffic lights" at the top to clue me into what was happening within my code.