How to draw 'PONG' by arranging the small icons displayed on 240 browser tabs?
Browser tabs display small icons called '
Running Pong in 240 Browser Tabs · eieio.games
https://eieio.games/blog/running-pong-in-240-browser-tabs/
Royalty was inspired by a friend's project ' FlappyFavi ,' which drew the side-scrolling game ' Flappy Bird ' in a favicon, and wondered if he could do something about it. The favicons displayed in browser tabs were quite small, at 16x16 pixels, so his friend's project had the disadvantage that it was difficult to understand what was going on. So Royalty thought, 'Why not line up a lot of tabs and draw an image?'
In fact, when I opened many tabs in Chrome until the favicons were minimized, the favicons in the tabs were aligned as follows:
To arrange the second and subsequent rows in the same way, Royalty used AppleScript , a scripting language for macOS, to create a script that would line up 30 tabs in eight columns. You can see how the 30 tabs are actually lined up in eight columns based on the script that Royalty created in the video below.
How to align 30 x 8 tabs to draw 'PONG' on a browser tab - YouTube
To draw a video in a favicon, the favicon needs to be updated periodically. By default, browsers draw favicons by referencing existing URLs or loading elements in the HTML head, and Chrome loads them four times per second. FlappyFavi makes it look like Flappy Bird is moving in the favicon by quickly updating HTML elements.
However, when a tab goes into the background, Chrome conserves resources to improve performance, so the loading speed of favicons differs between background tabs and active tabs. In the video below, you can see that the favicon updates about four times per second in an active tab, but only about once per second in a background tab.
Chrome's favicon update speed differs between background tabs and active tabs - YouTube
To get around the favicon update speed issue, Royalty tried playing 'insudden audio' in background tabs, but this didn't work. In the end, Royalty used a Web Worker to distribute JavaScript processing to background tabs, and succeeded in maintaining the favicon update speed even in background tabs.
To draw multiple tabs in a coordinated way, the script needs to know where each tab is located, so Royalty passed the current window and tab index as query parameters to the AppleScript script, allowing it to know the tab's location in X and Y coordinates.
The Broadcast Channel API is used as the communication channel for updating tabs, and a registration message containing the tab and window index is sent to synchronize the tabs. A mechanism has also been built to stop background tabs from loading until they are synchronized with the main tab.
Royalty also precisely measured the pixel size of the tabs and the gaps between them, calculating it to make the favicon look smoother.
After making some changes to reduce resources and speed up the site, we were able to achieve smooth rendering using favicons in conjunction with the video played in the main tab, as shown below.
How a moving square is drawn smoothly using a browser tab - YouTube
After that, Royalty considered what to draw and decided to draw 'PONG' including visual beauty. Royalty, who already had a lot of experience writing game code, said that he was able to easily create an API for drawing.
In the video below, you can see how the word 'PONG' is drawn using the favicons of 240 tabs open in Chrome.
How to draw 'PONG' using 240 browser tabs - YouTube
Royalty's code is available on GitHub.
GitHub - nolenroyalty/faviconic: what if you could run games in your tab bar?
https://github.com/nolenroyalty/faviconic
Related Posts:
in Software, Web Service, Video, Game, Posted by log1h_ik