In the category of things that are useless but that I find cool, I would like to tell you today a crazy technical experimentation where the Dev Eieio managed to make the legendary game work Pong through & mldr; 240 browser tabs! 🤯

The principle is relatively simple on paper: each favicon acts as a 4 × 4 pixel mini-screen in black and white. By coordinating precisely 240 tabs, you get a sufficient display matrix to run the good old pong.

Magic operates thanks to several techniques:

  1. Applescript To automatically open and position chrome windows with their 30 tabs each
  2. Of the Web workers To bypass the performance limitations of the tabs in the background
  3. THE Broadcast Channel API To synchronize all tabs between them
  4. A sharp management of the contact details to pass the ball and the snowshoes from one tab to another
The first difficulty for EIEIO was to orchestrate the opening of all these windows. Applescript turned out to be the ideal tool, making it possible to create 8 perfectly aligned chrome windows, then open 30 tabs in each window. Afterwards, still thanks to Applescript, he was able to position each window to the nearest pixel and transmit the position parameters at each tab

-- Création d'une fenêtre avec ses onglets
set bounds of newWindow to {x, y, x + width, y + height}
repeat (numTabs - 1) times
tell newWindow
make new tab with properties {URL:baseURL & "windowIndex=" & windowNum & "&tabIndex=" & tabCount}
end tell
end repeat

Then came the performance challenge because by default, Chrome drastically limits the resources of the tabs in the background. His solution was therefore to use Web workers To maintain a decent updating frequency.

Regarding the synchronization between the tabs, it relied on the Broadcast Channel API which is a communication channel allowing the main tab to coordinate all the others.

The author had to show surgical clarification to manage all aspects, namely & mldr;

  • Exact measures With 92 pixels between the left edge and the first favicon, 58 pixels between the favicons & mldr;
  • Performance optimization with chatting of favicons to avoid regenerating them unnecessarily
  • Good collision management with precise detection when the ball changes tab
  • And a draft for which he added a trace behind the ball to improve the visual rendering

Now, you still have to recognize it, recent browsers still have super powerful APIs, even if EIEIO has still shown ingenuity to bypass certain limits.

Now, if you want to test your pong, The source code is on github !

Source


Source link

Categorized in:

Technology