Game of Life

Implementación web del autómata celular de Conway. El tablero no tiene tamaño fijo, es un plano infinito que se navega moviendo la cámara y haciendo zoom. El render se hace sobre <canvas> y solo pinta las celdas dentro de la cámara, así que la simulación va fluida aunque haya patrones grandes activos.

Mecánica#

1. Pinta células con el lápiz o bórralas con la goma

   El selector pencil/eraser cambia el modo del click. También puedes arrastrar para pintar varias seguidas. Las cuatro reglas de Conway se aplican igual sin importar dónde pintes.

2. Mueve la cámara y haz zoom para navegar el tablero

   Arrastra con el botón central para mover la cámara. La rueda del ratón hace zoom (entre 0.5x y 5x). Hay un botón para centrar la cámara en el origen.

3. Carga un patrón clásico o genera uno aleatorio

   El menú de patrones trae Glider, Cañón de Gosper, Cañón Simkin, Pulsar, Pentadecatlón, Lightweight spaceship, Garden of Eden y más, agrupados por categoría (naves espaciales, osciladores, cañones, patrones estáticos). El botón Random pinta un cuadrado de 100×80 con ~30% de densidad.

4. Play, ajusta velocidad y mira las estadísticas

   Tres velocidades (lento 500ms, medio 100ms, rápido 50ms). El panel de estadísticas muestra el número de generaciones y de células vivas en tiempo real.

5. Guarda tu patrón o descarga el tablero como PNG

   El diálogo de guardado mete tu patrón actual en la lista local. El botón de descarga vuelca el canvas a una imagen.

Atajos de teclado: Espacio play/pause, C clear, R random.

Bajo el capó#

El tablero no es una matriz fija, es un Map<string, boolean> con claves "x,y". Eso permite que sea infinito sin reservar memoria por celdas vacías y simplifica el zoom y el movimiento de cámara. Cada tick recorre solo las celdas vivas y sus 8 vecinos para calcular la siguiente generación. El render pasa el contexto 2D del canvas por una transformación de zoom y cámara, y luego pinta únicamente las celdas dentro del rectángulo visible.

La UI usa Radix bajo el capó (sliders, tooltips, popovers, dropdowns), Tailwind para los estilos y framer-motion para algunas transiciones. Hay un easter egg escondido por ahí. Te lo dejo encontrar.