Click the mouse anywhere to create a blob. Move the mouse to control the direction and magnitude of the force vector. Hit ‘i’ to see the underlying physics implementation. Note: Please use Google chrome!

<br />

This is the culmination of my blob experiment. Originally, I planned on implementing a game where one player controls a blob, and another player controls the level mechanics in a platform game. However, I decided to move away from that into something more artistic and expressive. I was looking at my blobs that I implemented in box2d js, and thought that the entire “blob” experience requires external forces to be applied on the blob. Originally I thought this could only be done using gravity, but upon closer inspection, I realized that I could simply apply the force in any direction.

As a result, I decided to experiment with applying a force based on the mouse position. To do so, I calculated a force vector from the center of the screen (window width/2, window height/2), and applied this to all the blobs on the screen. Blobs are created on mouse click, and based on the movement of the mouse, a different force is applied. Also, I wanted the experience to be continuous. Thus, I remove blobs when they are > 500px away from the screen, and created a function that would be called at intervals to recreate blobs at random locations on the screen, fading in when they appeared.

I also liked the “trail” effect from my twitter visualization project and brought it over to this project as well. Hence, the blob leaves a bit of a trail when it moves around, especially when it moves quickly.

If I had time to work on this project further, I would have controlled the blob movement using optical flow, so that the user can control the movement of the blobs based on his/her own movement.