Pong exécuté dans 240 onglets de navigateur

Exécuter Pong dans 240 onglets de navigateur

• Utilisation des onglets inutilisés : le jeu Pong est exécuté en disposant 240 onglets de navigateur en une grille 8x30. La balle et les raquettes peuvent se déplacer de façon fluide entre le canvas de la fenêtre au premier plan et l’ensemble des onglets.

Inspiration

• Flappy Favi : l’idée est née après avoir vu un ami, Tru, créer une version de Flappy Bird qui s’exécute dans un favicon. Comme le favicon est petit et difficile à voir, l’auteur a imaginé dessiner l’image sur plusieurs onglets.

Prototypage

• Création de la grille d’onglets : un AppleScript ouvre 30 onglets dans chacune de 8 fenêtres Chrome, puis place correctement les fenêtres pour former une grande grille. Au démarrage, le script nettoie aussi les onglets rouverts automatiquement par Chrome afin de contourner ce comportement.

Mise à jour rapide des favicons

• Mise à jour des favicons : en indiquant l’emplacement du favicon dans l’élément head du HTML, le navigateur est amené à modifier l’icône. Chrome peut mettre à jour l’icône environ 4 fois par seconde. Dans les onglets en arrière-plan, la boucle setInterval ne s’exécute qu’une fois par seconde.

• Utilisation de Web Workers : des Web Workers sont utilisés pour faire envoyer des messages de temporisation au document principal, afin que cela fonctionne de manière fluide même dans les onglets en arrière-plan.

Communication entre les onglets

• Repérage de la position des onglets : le code AppleScript transmet l’index de la fenêtre et de l’onglet actuel via des paramètres de requête, afin que chaque onglet puisse connaître sa propre position.

• Utilisation de Broadcast Channel : au lieu de WebSocket, Broadcast Channel est utilisé pour diffuser des informations aux autres onglets du même domaine. L’onglet principal lance ensuite l’animation après avoir reçu les événements d’enregistrement de tous les onglets en arrière-plan.

Du canvas à la barre d’onglets

• Connexion entre le canvas et la barre d’onglets : les formes dessinées dans la fenêtre au premier plan peuvent se déplacer jusque dans la barre d’onglets. Grâce à des mesures précises, le canvas et les favicons sont alignés, puis le dessin est envoyé vers le favicon ou le canvas principal selon la position des formes.

Accélération

• Optimisation de l’utilisation des ressources : au lieu de mettre à jour les favicons à chaque frame, ils ne sont actualisés que lorsqu’un changement se produit, ce qui améliore les performances.

Que fabriquer ?

• Idée de jeu : Snake devait être implémenté en premier, mais Pong a finalement été choisi car l’effet de déplacement entre le canvas et la barre d’onglets y fonctionne mieux.

Implémentation de Pong

• Implémentation du jeu Pong : le joueur contrôlé par l’ordinateur aligne le centre de la raquette sur celui de la balle. Quand la balle rebondit sur une raquette, un angle est calculé avec une trigonométrie simple. Une traînée a été ajoutée à la balle pour mieux mettre en valeur son passage fluide vers les favicons avec les raquettes.

Conclusion

• Expérience du projet : ce projet a été réalisé au Recurse Center, une source d’inspiration importante. Le Recurse Center est présenté comme une sorte de retraite d’écriture pour la programmation, et l’expérience vécue sur place a servi de motivation au projet.

[GN⁺]

Commentaires Hacker News

• Bonjour ! C'est moi qui l'ai fait. Je me demandais si ça plairait à la communauté HN

  • Je trouve vraiment intéressant d’imaginer à quoi cela ressemblerait avec des animations (Firefox prend en charge les favicons animés) — par exemple, on pourrait prédire la future position de la balle et créer un SVG animé pour obtenir un bien meilleur framerate
  • Un ami m’a fait remarquer que la rastérisation du canvas hors ligne se fait (généralement) sur le GPU, donc il est possible que mon intuition sur les performances concernant les saccades de mon animation soit fausse
  • Je suis modérément certain que Chrome limite les mises à jour de favicon à 4 fois par seconde ; il existe beaucoup de façons différentes de mettre à jour un favicon, donc il est possible que j’aie raté quelque chose

• J’ai assisté récemment à la conférence de Nolen chez Recurse, et ces jeux absolument délirants mais fondamentalement amusants et géniaux sont vraiment fascinants

  • Ça me rappelle l’ancien Internet, quand les gens fabriquaient des choses simplement pour le plaisir
  • Inspiré par ce que Nolen a publié hier soir, j’ai créé une sorte de quine très amusant qui affiche le code source de la page, en utilisant la décompilation BEAM et d’autres astuces
  • J’aimerais avoir le temps de créer ce genre de choses, et savoir qu’il y a des gens qui produisent encore des choses de cette façon me fait sourire
  • Si vous voulez rire, voici l’œuvre qui permet d’obtenir ce quine : lien

• J’adore tout ce que fait Nolen. Pour moi, il semble avoir trouvé ce point d’équilibre parfait dans le développement d’apps/sites à usage unique qui rappellent l’époque où Internet était différent

• Une exploration similaire de Matthew Rayfield, utilisant la barre d’URL au lieu des favicons d’onglet : lien

• Ça me fait penser à :

  • "Show HN: J’ai vu cette expérience incroyable et j’en ai fait une version simple" (2023.11.25) lien
  • "Synchroniser une scène 3D entre plusieurs fenêtres avec Three.js et localStorage" (2023.11.27) lien

• J’annonce que Doom sera le prochain

• Agréablement absurde, et un effort méritant un A+

• Il y avait un clip du groupe "Ok Go" en collaboration avec Google Chrome, avec une synchronisation incroyable entre des fenêtres de navigateur et des danseurs, ainsi que des effets kaléidoscopiques... ça m’y fait penser

• On dirait bien qu’un port de Doom va arriver d’ici quelques jours

• Vraiment génial, j’aime à quel point Chrome peut être modifié ; ici, on dirait que ça utilise des WebSockets, mais on pourrait aussi utiliser des extensions pour la communication entre onglets