blobby

week 14may 7, 2025

For the final week of working on Blobby, I focused on adding in refinements in preparation for the upcoming showcase. Until now, I had only tested Blobby in the comfort of my home, so I wanted to be prepared for any unexpected behavior that might arise in a new environment. To help with that, I added an FPS (frames per second) counter at the bottom of the webpage, allowing me to quickly monitor performance and see how smoothly the blobs are rendering. I also took the opportunity to refactor JavaScript files to TypeScript, adding type-checking to improve code quality and maintainability.

With the core functionality already complete, I decided to start thinking about visual manipulations like color, inversion, and rotation. The color feature was the simplest to implement. I added a color picker that allows users to change the fill color of the blobs. To maintain visual contrast, I programmed the background to always shift to the opposite color, so that the blobs remain clearly visible when any color is chosen. From there, I added an inversion effect such that adjacent tiles would swap blob and background colors, meaning the background of one tile blends seamlessly into the blob of the next. The third feature, rotation, allows portions of the tile grid to rotate 90, 180, or 270 degrees when a specific key is pressed.

Playing around with these new effects made it clear that allowing users to toggle and combine them would provide a far more interactive and playful experience. I wanted to integrate the effects seamlessly into the showcase presentation, so I added a function that would trigger a random change in the tile grid every five seconds.
The five possible changes are:

Change the size of the tile grid
Change the tile pattern
Change the blob/background color
Toggle the inversion effect
Toggle the rotation effect

©Aditi Gupta

New York University
Integrated Design & Media (IDM) Graduate Thesis