I started by creating a
div
, identified as canvasContainer, that has a grid layout with a set number of rows and cols. Each row and column has a width of 1fr so that they areall the same size. I then created a separate file called canvasPattern.ts. I wanted to write these functions in TypeScript so that everything is strongly typed, meaning that I can designate variables to be a certain type and the compiler will make sure all the types are accurate. I expect the functions to be complicated, so using TypeScript will keep me honest in keeping everything organized. I built two functions, generateTilePattern() and buildCanvasGrid(). generateTilePattern() takes in the number of webcams, the number of rows, the number of columns, and the pattern index, and returns which webcam each canvas is assigned to. The pattern index indicates which pattern to use, enabling me to code multiple tile patterns to experiment with. As my first tile pattern, I wrote a function that alternates the canvases between each webcam. The second function, buildCanvasGrid(), uses the tile pattern to add canvases to canvasContainer, while keeping track of which canvases are associated with each webcam. Once it has the lists of canvases for each webcam, it passes them to the generateTilePattern() and buildCanvasGrid() functions are re-run. I now can change the size of the tile grid on-demand!For the remainder of the week, I made changes to the other parts of the project. I first investigated the threading of the
WebcamController. Initially, I thought threading would enable the simultaneous processing of all the webcams, but further research revealed to me that threading doesn’t fully parallelize the tasks. Python has a Global Interpreter Lock (GIL) which limits only one thread to use the assigned processor for the program at a time. In other words, threading causes the processor to just jump between different threads very quickly, as opposed to handling them synchronously. To accomplish true parallelization, multiprocessing is required. Multiprocessing separates a Python program into multiple processes, each with their own GIL. I changed the WebcamController to create a new process for each Webcam object. I tested this networking set-up with three webcams. The WebSocket server forwards all the messages flawlessly and my computer is able to display all three blobs without lag on my site. I also added a shell script to run my project. I was tired of having to launch three different terminals to separately run the website, WebSocket server, and Python webcam processing, so I made a script that will run all three. Because the webcam processing involves multiple processes and infinite loops, I also wanted to make sure that I could terminate it smoothly. The shell script records the process IDs (PIDs) of each part of the project, and when I hit Ctrl+C, it uses the PIDs to kill each process. With these changes, Blobby feels much smoother to use, and I’m able to more easily test its features.