week 09apr 02, 2025This week, I focused on getting closer to the final product of a tiled display of blobs. Before I created the tiling algorithm, I had to update my site so it could draw a single Webcam’s blob on multiple canvases. I wanted to keep the computation cost as low as possible, so I analyzed the code and found that the costliest part of the webpage was rendering the blob, i.e. turning it from a set of points to a filled-in shape. Luckily, it’s easy to copy from one canvas to another, so I only have to render each new blob once. I was worried though, that if there are multiple webcams and they are all sending twenty to thirty blobs a second, that the website would be overwhelmed and laggy. As a solution, I came across JavaScript’s Web Worker class, which can run scripts in the background of web pages to free up the main thread. I modified my code to create a Web Worker for each webcam, allowing it to render a blob on a canvas in a background thread before passing the finished image to the main thread to draw on all associated canvases. I tested it out with one webcam, and I couldn’t see any timing differences between the canvases, but I’m assuming it will make a difference as Blobby scales up.
I also refactored my code to use a central configuration file. There are certain parameters that are used for all parts of the project, such as the number of webcams and the port of the WebSocket server. I wanted a way to edit these values without having to go into each file individually. So, I created a config.json file and referenced it in my code where applicable. It instantly became much easier to edit the configuration of the project.