The other day I was responding to a poll for a club to pick a weekly meeting time. We used a site called Crab Fit for this - it's basically an open-source version of when2meet, where you can create a poll where people can select a range of times when they're available. You can see what times work the best for everyone, as well as what times each individual person is available.
As I was filling this out, I noticed the availability display formed a grid, each cell of which could be toggled on or off. Of course, the natural response to seeing anything like that is to immediately drop everything that you're doing and get the Bad Apple video to run on it.
For those not aware, the Bad Apple!! video is a shadow art video that's become a meme in the vein of Doom, where people try to get it running on everything that's even remotely capable of displaying pixels. This isn't the first time I've gotten it to play on something weird - a few years ago, I made a Google doc that played the animation when you held down the right arrow key using only comments.
There were a few tricky parts involved with getting this working. For one, the resolution and aspect ratio are pretty unusual - the smallest interval is 15 minutes long, and the box for each hour is 4:3, so each individual "pixel" is over five times wider than it is tall.
I originally tried using the full 96 pixels of height (24 hours in a day, in 15-minute intervals) by 24 pixels wide at 12 FPS. As it turns out, this was too much data - the availability is sent to the client as a datetime string for each 15-minute interval that's selected, and the server started timing out when requesting availability for all users after about a fifth of the frames were uploaded. So, I reduced it down to a slightly-more-reasonable 16x64@6FPS.
Syncing it up with the audio was also a bit of a pain - I originally wrote a script to call the hover event for each user's button, then sleep for a certain amount of time, and recorded the entire thing with OBS. Then I sped up the video to be the same length as the original with the audio. But it turns out that the amount of time it takes to redraw is not uniform across different sections of the video, so some parts would get a few seconds ahead while others would get a few seconds behind. I "fixed" this by having the browser wait for keypresses before advancing to the next frame, then just setting up a bash script to repeatedly fake a keypress, wait a second, and then trigger a screenshot.
Here's a video of it in action:
As I was filling this out, I noticed the availability display formed a grid, each cell of which could be toggled on or off. Of course, the natural response to seeing anything like that is to immediately drop everything that you're doing and get the Bad Apple video to run on it.
For those not aware, the Bad Apple!! video is a shadow art video that's become a meme in the vein of Doom, where people try to get it running on everything that's even remotely capable of displaying pixels. This isn't the first time I've gotten it to play on something weird - a few years ago, I made a Google doc that played the animation when you held down the right arrow key using only comments.
There were a few tricky parts involved with getting this working. For one, the resolution and aspect ratio are pretty unusual - the smallest interval is 15 minutes long, and the box for each hour is 4:3, so each individual "pixel" is over five times wider than it is tall.
I originally tried using the full 96 pixels of height (24 hours in a day, in 15-minute intervals) by 24 pixels wide at 12 FPS. As it turns out, this was too much data - the availability is sent to the client as a datetime string for each 15-minute interval that's selected, and the server started timing out when requesting availability for all users after about a fifth of the frames were uploaded. So, I reduced it down to a slightly-more-reasonable 16x64@6FPS.
Syncing it up with the audio was also a bit of a pain - I originally wrote a script to call the hover event for each user's button, then sleep for a certain amount of time, and recorded the entire thing with OBS. Then I sped up the video to be the same length as the original with the audio. But it turns out that the amount of time it takes to redraw is not uniform across different sections of the video, so some parts would get a few seconds ahead while others would get a few seconds behind. I "fixed" this by having the browser wait for keypresses before advancing to the next frame, then just setting up a bash script to repeatedly fake a keypress, wait a second, and then trigger a screenshot.
Here's a video of it in action: