Pong, das in 240 Browser-Tabs läuft

Pong in 240 Browser-Tabs ausführen

• Ungenutzte Tabs nutzen: Pong wird ausgeführt, indem 240 Browser-Tabs in einem 8x30-Raster angeordnet werden. Der Ball und die Schläger können sich nahtlos zwischen der Canvas im Vordergrundfenster und allen Tabs bewegen.

Inspiration

• Flappy Favi: Die Idee entstand inspiriert von Freund Tru, der eine Version von Flappy Bird gebaut hatte, die im Favicon läuft. Da Favicons klein und schwer zu erkennen sind, entstand die Idee, Bilder über mehrere Tabs hinweg zu zeichnen.

Prototyping

• Tab-Raster erstellen: Mit AppleScript werden 8 Chrome-Fenster mit jeweils 30 Tabs geöffnet und passend angeordnet, sodass ein großes Raster entsteht. Das Skript räumt beim Start auf, um ein Chrome-Verhalten zu umgehen, bei dem geschlossene Tabs erneut geöffnet werden.

Schnelle Favicon-Updates

• Favicon aktualisieren: Durch Angabe des Favicon-Speicherorts im head-Element von HTML wird der Browser dazu gebracht, das Icon zu ändern. Chrome kann das Icon ungefähr 4-mal pro Sekunde aktualisieren. In Hintergrund-Tabs läuft eine setInterval-Schleife nur einmal pro Sekunde.

• Web Worker verwenden: Damit es auch in Hintergrund-Tabs flüssig funktioniert, werden Web Worker eingesetzt, die Timer-Nachrichten an das Hauptdokument senden.

Kommunikation zwischen Tabs

• Tab-Position erkennen: Der AppleScript-Code übergibt das aktuelle Fenster und den Tab-Index als Query-Parameter, damit jeder Tab seine eigene Position kennt.

• Broadcast Channel verwenden: Statt WebSockets wird ein Broadcast Channel genutzt, um Informationen an andere Tabs derselben Domain zu verteilen. Nachdem der Haupt-Tab die Registrierungsereignisse aller Hintergrund-Tabs empfangen hat, startet er die Animation.

Von der Canvas in die Tab-Leiste

• Canvas und Tab-Leiste verbinden: Es wurde umgesetzt, dass im Vordergrundfenster gezeichnete Formen in die Tab-Leiste übergehen. Durch präzise Messungen werden Canvas und Favicons ausgerichtet, und je nach Position der Form wird entweder ins Favicon oder auf die Haupt-Canvas gezeichnet.

Geschwindigkeit erhöhen

• Ressourcennutzung optimieren: Die Performance wird verbessert, indem Favicons nicht in jedem Frame, sondern nur bei Änderungen aktualisiert werden.

Was soll gebaut werden?

• Spielidee: Zunächst sollte Snake umgesetzt werden, aber es wurde entschieden, dass Pong den Effekt des Übergangs zwischen Canvas und Tab-Leiste besser zur Geltung bringt.

Pong-Implementierung

• Pong-Spiel umsetzen: Der Computergegner richtet die Mitte seines Schlägers an der Mitte des Balls aus. Wenn der Ball vom Schläger abprallt, wird der Winkel mit einfacher Trigonometrie berechnet. Um den sanften Übergang von Ball und Schlägern in die Favicons zu betonen, wurde dem Ball ein Trail hinzugefügt.

Abschluss

• Projekterfahrung: Dieses Projekt entstand während der Zeit im Recurse Center und brachte viel Inspiration. Das Recurse Center ist wie ein Writer’s Retreat für Programmierer, und die Erfahrungen dort waren eine wichtige Motivation für das Projekt.

[GN⁺]

Hacker-News-Kommentare

• Hallo! Ich habe das gebaut. Ich war neugierig, ob das bei der HN-Community ankommt.

  • Es wäre wirklich interessant zu sehen, wie das mit Animationen aussehen würde (Firefox unterstützt animierte Favicons) – man könnte zum Beispiel die zukünftige Position des Balls vorhersagen und ein animiertes SVG erstellen, um eine deutlich bessere Framerate zu bekommen.
  • Ein Freund hat mich darauf hingewiesen, dass die Offline-Canvas-Rasterisierung (im Allgemeinen) auf der GPU erfolgt, daher könnte meine Performance-Intuition dazu, warum meine Animation ruckelt, falsch gewesen sein.
  • Ich bin mir einigermaßen sicher, dass Chrome Favicon-Updates auf viermal pro Sekunde begrenzt; es gibt viele verschiedene Möglichkeiten, Favicons zu aktualisieren, also könnte ich etwas übersehen haben.

• Ich war bei Nolens letztem Recurse-Vortrag, und diese absolut verrückten, aber im Kern spaßigen und coolen Spiele sind wirklich faszinierend.

  • Es erinnert an das frühe Internet, als Leute Dinge einfach zum Spaß gebaut haben.
  • Inspiriert von den Dingen, die Nolen gestern Abend gepostet hat, habe ich eine sehr unterhaltsame Art von Quine gebaut, die den Quellcode der Seite ausgibt, unter Verwendung von BEAM-Decompiling und anderen Tricks.
  • Ich wünschte, ich hätte Zeit, solche Dinge zu bauen, und allein zu wissen, dass es Menschen gibt, die auf diese Weise etwas erschaffen, bringt mich zum Lächeln.
  • Falls ihr lachen wollt: Das Werk, das diese Quine hervorbringt, ist hier: Link

• Ich liebe alles, was Nolen macht. Für mich sieht es so aus, als hätte er genau den sweet spot gefunden, um Single-Purpose-Apps/-Sites zu entwickeln, die mich an das erinnern, was das Internet einmal war.

• Eine ähnliche Erkundung von Matthew Rayfield, bei der statt Tab-Favicons die URL-Leiste verwendet wurde: Link

• Erinnert mich an Folgendes:

  • "Show HN: Ich habe dieses unglaubliche Experiment gesehen und eine einfache Version gebaut" (25.11.2023) Link
  • "Synchronisierung einer 3D-Szene über mehrere Fenster mit Three.js und localStorage" (27.11.2023) Link

• Ich nenne Doom als Nächstes.

• Auf angenehme Weise absurd, A+-Einsatz.

• Es gab ein Musikvideo der Band "Ok Go" in Zusammenarbeit mit Google Chrome, mit einer erstaunlichen Synchronisation von Browserfenstern und Tänzern sowie kaleidoskopartigen Effekten ... das erinnert mich daran.

• Ich habe das Gefühl, ein Doom-Port kommt in den nächsten Tagen.

• Wirklich cool, ich mag, wie anpassbar Chrome sein kann; das hier scheint WebSockets zu verwenden, aber man könnte für die Kommunikation zwischen Tabs auch Erweiterungen nutzen.