Pong ejecutándose en 240 pestañas del navegador

Ejecutar Pong en 240 pestañas del navegador

• Aprovechar las pestañas sin usar: Ejecuta el juego Pong organizando 240 pestañas del navegador en una cuadrícula de 8x30. La pelota y las paletas pueden moverse con fluidez entre el canvas de la ventana en primer plano y todas las pestañas.

Inspiración

• Flappy Favi: Se inspiró en que su amigo Tru creó una versión de Flappy Bird que corre en un favicon. Como los favicons son pequeños y difíciles de ver, se le ocurrió la idea de dibujar la imagen en varias pestañas.

Prototipado

• Crear la cuadrícula de pestañas: Usó AppleScript para abrir 30 pestañas en cada una de 8 ventanas de Chrome, y colocó las ventanas adecuadamente para formar una gran cuadrícula. Al iniciar, el script también limpia el estado para resolver el comportamiento de Chrome de reabrir pestañas cerradas.

Actualización rápida del favicon

• Actualizar el favicon: Hace que el navegador cambie el ícono indicando la ubicación del favicon en el elemento head de HTML. Chrome puede actualizar el ícono unas 4 veces por segundo. En las pestañas en segundo plano, el bucle de setInterval solo se ejecuta una vez por segundo.

• Uso de Web Workers: Usa Web Workers para hacer que el temporizador envíe mensajes al documento principal, de modo que funcione con fluidez incluso en pestañas en segundo plano.

Comunicación entre pestañas

• Reconocer la posición de cada pestaña: El código de AppleScript pasa el índice actual de ventana y pestaña como parámetros de consulta para que cada pestaña conozca su propia posición.

• Uso de Broadcast Channel: En lugar de WebSockets, usa Broadcast Channel para distribuir información a otras pestañas del mismo dominio. La pestaña principal ejecuta la animación después de recibir los eventos de registro de todas las pestañas en segundo plano.

Del canvas a la barra de pestañas

• Conectar el canvas y la barra de pestañas: Implementó que las figuras dibujadas en la ventana en primer plano se desplacen hacia la barra de pestañas. Con mediciones precisas, alinea el canvas y el favicon, y dibuja en el favicon y en el canvas principal según la posición de la figura.

Mejorar la velocidad

• Optimizar el uso de recursos: Mejoró el rendimiento actualizando el favicon no en cada fotograma, sino solo cuando hay cambios.

¿Qué construir?

• Idea de juego: Primero intentó implementar Snake, pero decidió elegir Pong porque el efecto de moverse entre el canvas y la barra de pestañas funcionaba mejor.

Implementación de Pong

• Implementar el juego Pong: El jugador controlado por la computadora hace coincidir el centro de la paleta con el centro de la pelota. Cuando la pelota rebota en una paleta, calcula el ángulo usando trigonometría simple. Para destacar el efecto de que la pelota y las paletas se muevan suavemente hacia los favicons, añadió una estela a la pelota.

Cierre

• Experiencia del proyecto: Realizó este proyecto en Recurse Center y recibió mucha inspiración allí. Recurse Center es como un retiro de escritores para la programación, y esa experiencia fue una motivación para el proyecto.

[GN⁺]

Opiniones de Hacker News

• ¡Hola! Yo hice esto. Tenía curiosidad por saber si le gustaría a la comunidad de HN

  • Sería realmente interesante ver cómo se vería usando animación (Firefox sí soporta favicons animados); por ejemplo, se podría predecir la posición futura de la pelota y generar un SVG animado para obtener una tasa de cuadros mucho mejor
  • Un amigo señaló sin conexión que la rasterización de canvas (por lo general) se hace en la GPU, así que puede que mi intuición de rendimiento sobre por qué mi animación va entrecortada haya estado equivocada
  • Estoy moderadamente seguro de que Chrome limita las actualizaciones del favicon a 4 veces por segundo; hay muchas formas distintas de actualizar el favicon, así que podría haber algo que se me escapó

• Asistí recientemente a una charla de Recurse de Nolen, y estos juegos absolutamente locos pero fundamentalmente divertidos y geniales son realmente encantadores

  • Me recuerda al internet de antes, cuando la gente hacía cosas simplemente por diversión
  • Inspirado por las cosas que Nolen publicó anoche, hice una especie de quine muy divertido que imprime el código fuente de la página, usando descompilación de BEAM y otros trucos
  • Ojalá tuviera tiempo para hacer cosas así, y me hace sonreír saber que hay personas creando cosas de esta manera
  • Si quieres reírte, la obra que produce este quine está aquí: enlace

• Me encanta todo lo que hace Nolen. Para mí, parece que encontró ese punto ideal desarrollando apps/sitios de un solo propósito que me recuerdan a como era internet antes

• Una exploración similar de Matthew Rayfield usando la barra de URL en lugar del favicon de la pestaña: enlace

• Me recuerda a lo siguiente:

  • "Show HN: Vi este increíble experimento e hice una versión simple" (2023.11.25) enlace
  • "Sincronizar una escena 3D entre múltiples ventanas usando Three.js y localStorage" (2023.11.27) enlace

• Dicen que Doom es lo siguiente

• Agradable y absurdamente ridículo, esfuerzo de A+

• Había un video musical de la banda "Ok Go" en colaboración con Google Chrome, con una increíble sincronización entre ventanas del navegador y bailarines y efectos tipo caleidoscopio... esto me hizo pensar en eso

• Parece que en unos días saldrá un port de Doom

• Está realmente genial, me gusta lo modificable que puede llegar a ser Chrome; parece que esto usa WebSockets, pero también se podría usar una extensión para la comunicación entre pestañas