JavaScript Haikus: Mis Aventuras en la Programación Mínima

Hola a todos. Bienvenidos a JavaScript HiCues. Una charla sobre mis aventuras en la escritura de programas JavaScript super pequeños.

Primero, un poco sobre mí. Mi nombre es Frank Forrest. Tengo una licenciatura en ciencias de la computación y tengo más de 20 años trabajando en la industria de los videojuegos en todo Estados Unidos, algunos juegos que tal vez hayas jugado. Actualmente, me estoy enfocando en el desarrollo de juegos independientes y en la creación de arte generativo. Aquí hay algunos de los juegos que hice, todos con JavaScript. También hago arte generativo, que, nuevamente, está hecho con JavaScript.

Pero hoy nos vamos a centrar en estos programas del tamaño de un tweet. He hecho más de mil de ellos y quiero compartir mis secretos contigo hoy. Hablemos sobre el código diminuto. Entonces, ¿qué es el código diminuto? Shakespeare dijo, La brevedad es el alma del ingenio. Y eso es más o menos lo que es el código diminuto. Pero en lugar del lenguaje, hay muchas formas diferentes de describir el código diminuto. Puedes llamarlo size coding, code golf o simplemente minificar. Pero en última instancia, el objetivo es crear arte genial, música u otros tipos de efectos y crearlo con la menor cantidad de código posible mientras te diviertes.

Todo esto comenzó con la demo scene a principios de los años 80. Tal vez hayas oído hablar de ella. Es una subcultura de arte informático donde las personas crean demos que están compuestos por gráficos y música. A menudo se ejecutan en computadoras más antiguas. Pueden tener desde 64 kilobytes hasta incluso menos de 256 bytes. Pero esos utilizan bytecode, por lo que poco a poco están adoptando lenguajes como JavaScript. El code golf es el corazón de la programación diminuta y se trata de utilizar trucos de programación para ahorrar espacio. Por ejemplo, comprimirás tu código eliminando los espacios en blanco, utilizando variables de una sola letra, no utilizando ifs y simplemente no utilizando funciones y luchando por cada byte posible para comprimirlo todo. JavaScript es genial para este tipo de cosas porque puedes usar un editor en vivo. Es una herramienta basada en web donde puedes escribir código y verlo suceder y ejecutarse al instante en tiempo real. Tiene una retroalimentación instantánea y es una forma muy visual de programar.

Me encanta usar un editor en vivo para este tipo de cosas. Incluso puedes capturar gifs e imágenes con él y tiene algunas herramientas para ayudar a depurar y guardar y cargar tu código para facilitar la iteración. Hay varias formas diferentes de compartir código diminuto.

Puedes enviarlo a una demo party. También hay sitios web donde puedes compartir tu código, como Shader Toy o Twitter.net, del cual hablaremos hoy. ¿Qué es Twitter? Twitter.net es un lugar donde puedes compartir demos de JavaScript de 140 caracteres. Fue creado en 2016 y actualmente tiene más de 20,000 tweets. El sitio web en sí es de código abierto. Y estamos trabajando en una nueva versión beta que tiene algunas características avanzadas que también mostraré hoy.

Lo básico de Twitter es que cuando comienzas un nuevo tweet, se te presentará este código predeterminado que dibuja nueve líneas en la pantalla y las hace moverse de un lado a otro. Aquí está el código para eso. También configurará automáticamente un lienzo y un bucle para que la animación sea realmente fácil de hacer funcionar. Hay algunas funciones que se configuran automáticamente para seno, coseno, tangente y para obtener un color RGBA. Por ejemplo, si quieres minificar el programa predeterminado de Twitter, comienzas con el de la izquierda y luego haces optimizaciones y minificaciones eliminando los comentarios y reduciéndolo. Luego puedes hacerlo aún más pequeño haciendo algunas concesiones, que cambian un poco la salida, pero de una manera apenas perceptible. Por ejemplo, cambiar el espacio entre esos rectángulos de 100 a 99. Eso ahorra un byte completo de espacio, y ahorrar esos bytes realmente suma.

Twitter también se puede ejecutar de forma independiente. Entonces, si quisieras hacer, digamos, un archivo HTML que pueda ejecutar un tweet, se vería algo así. El código del tweet es solo esa pequeña parte en el centro. Todo lo demás es configurar la interfaz de Twitter en un lienzo. Solo se necesita una cantidad mínima de código para ejecutar uno de estos. Es prácticamente JavaScript básico. Hemos hecho todo tipo de remixes divertidos del tweet predeterminado. Aquí están algunos de mis remixes favoritos de la comunidad. También he hecho algunos yo mismo, todos utilizando el mismo concepto y explorando lo que podemos hacer con solo esas nueve líneas verticales.

Algo que debes tener en cuenta al usar Twitter es que Twitter utiliza 140 caracteres, y cada uno de esos caracteres puede contener varios bytes. Encontramos una forma de almacenar dos bytes en cada uno de estos caracteres Unicode, y con el decodificador también incluido, podemos ajustar hasta 194 bytes en un solo tweet. Puedes imaginar cómo funciona esto, tienes estos caracteres Unicode astrales que contienen cuatro bytes, pero dos de los bytes pueden ser lo que quieras. Entonces, la forma en que funciona la descompresión es que llama a escape en el carácter Unicode, elimina lo innecesario, luego lo desescapa y evalúa lo que queda. Realmente nos ha permitido empujar los límites de lo que es posible en un tweet.

Puedes usar una técnica similar para comprimir datos de imágenes. He experimentado un poco con eso para crear la Mona Duitza, una Mona Lisa que cabe en un tweet, e incluso un autorretrato y todo tipo de gráficos antiguos, arte de mapas de bits. Es bastante divertido experimentar con gráficos diminutos.

La mayor parte de lo que haremos es utilizar la API de lienzo 2D para dibujar formas geométricas, texto y emojis. Podemos establecer el color en alfa y utilizar características como sombra y desenfoque de sombra para crear efectos especiales. Incluso es posible dibujar un píxel a la vez para crear gráficos de rasterización de alta definición. Por ejemplo, las funciones que utilizaremos son fillRect, arc, establecer el estilo de relleno, dibujar líneas, ese tipo de cosas, y casi todo se hace utilizando este pequeño conjunto de funciones.

También hay otras opciones que puedes utilizar para gráficos, como HTML, CSS tiene algunas cosas interesantes que puedes hacer, e incluso hacer SVG, y logré trazar uno de mis tweets que utiliza un SVG. Fue una especie de experimento divertido. Los números aleatorios son realmente clave para este tipo de creación artística, y existe un Math.random, por supuesto, que puedes usar para obtener números aleatorios entre cero y uno. Pero a veces necesitas algo como un número aleatorio fijo, y puedes lograrlo haciendo el seno de un valor al cuadrado, es una forma sencilla de obtener un tipo de resultado aleatorio. Y hay todo tipo de cosas que puedes hacer para obtener números aleatorios, como usar el operador módulo, e incluso crear un tipo de ruido fractal, un efecto de ruido Perlin con esto también. Hay tantos tipos diferentes de algoritmos que son posibles en este espacio. Es algo increíble. Realmente todo es posible. Y eso es lo que te voy a mostrar hoy.

Incluso puedes hacer juegos diminutos que quepan en este espacio. He experimentado un poco con eso y he creado una gran variedad de juegos, aunque obtener entrada requiere un poco de espacio. Puedes usar un evento onclick. Es la opción más pequeña para obtener entrada del mouse. Tal vez algo como onkeydown para obtener entrada del teclado. O incluso es posible obtener entrada de un gamepad en un espacio bastante reducido para crear estos juegos diminutos y experiencias interactivas. Por ejemplo, si quisieras hacer Flappy Bird, que quepa en 244 bytes de HTML puro, se vería algo así. Básicamente, crearás un lienzo y el resto es todo JavaScript, obtener el contexto del lienzo, configurar un intervalo y un poco de lógica para la parte de la física, y la única entrada se realiza mediante un evento onclick. Luego, para dibujar cosas, hay una parte de FillRect y FillText, y el resto es solo un poco de lógica necesaria para ejecutar el juego. También puedes hacer sonidos en ese espacio reducido, aunque es muy difícil de ajustar porque el código para reproducir el sonido ocupa tanto espacio que no queda mucho para determinar qué se debe reproducir realmente. Aun así, hemos hecho mucho de eso. En Twitter, existe BiteBeat Music como opción. He lanzado un álbum completo de BiteBeat Music en Twitter, e incluso puedes usar la síntesis de voz para crear voces con la capacidad de ajustar el tono y el volumen también. Así que hay oportunidades allí.

Hablemos de algunos de los Tweets que me inspiraron. Echa un vistazo a este increíble Tweet submarino de Pavel. Me encanta este. Es tan simple y muestra el poder de Twitter. Casi todo lo que ves aquí será un bucle for y luego un estilo de relleno y un relleno de rectángulo es como funcionan muchos de estos Tweets. Aquí tienes una demostración de raycasting. Es realmente increíble. Me sorprendió mucho cuando lo vi por primera vez. Me encanta este Tweet de la puerta de cuarentena de Yanni. Tiene una pequeña optimización aquí para almacenar el relleno del rectángulo en F y luego usarlo para llamar al relleno del rectángulo múltiples veces, una técnica común que se ve en Twitter. Este de un avión de papel volador es realmente genial. Se hace de una manera un poco diferente, donde tienes una función que se alinea con. Me encanta este simulador de tráfico de la ciudad de Tom Exor. Es alucinante cómo logró crear esto. El mar y lo que más me gusta son los pequeños coches que conducen por la ciudad y parecen interactuar entre sí. Yantan hizo esta estructura 3D ahumada. En este caso, se utilizan efectos de sombra para crear una especie de desenfoque nublado y ahumado en 3D.

Entonces echemos un vistazo a algunos de mis ejemplos de código pequeño y puedo explicarte cómo funcionan realmente. Aquí está el primer tweet que hice allá por 2019. No es mi mejor trabajo, pero en ese momento lo era y he recorrido un largo camino desde entonces. De hecho, he hecho más de mil en los últimos cuatro años. Aquí tienes algunos de los mejores.

He cubierto una amplia gama de temas. El espacio es uno de mis favoritos. Por ejemplo, para crear un efecto de agujero negro, puedes hacerlo iterando y estableciendo un color y dibujando estos rectángulos rellenos. En este caso, comienza desde abajo, itera hacia arriba y se expande en espiral, y ese color comienza en rojo y se va hacia el blanco, y hay una prueba especial para el primer rectángulo que se dibuja para dibujar ese negro en el fondo. Puedes hacer renderizado fractal en este espacio muy bien. Se presta muy bien al código pequeño. Por ejemplo, un renderizado de Mandelbrot pequeño se vería algo así. Utiliza la técnica de renderizar un píxel a la vez para obtener un renderizado de alta definición.

Los autómatas celulares son un efecto muy poderoso. Aquí tienes algunos de los que he hecho. Puedes obtener muchos resultados diferentes, como efectos de agua o fuego, que son más de tipo matemático. Aquí tienes un triángulo de Sierpinski que se dibuja utilizando un efecto de autómata celular 1D. Almacena las celdas en un array y las actualiza todas basándose en la regla, que en este caso es la regla 90, pero lo que realmente importa son los bits de esa regla que se utilizan para determinar el siguiente estado de cada celda. He hecho tantos experimentos diferentes con pequeñas ciudades y edificios. Me encanta ese tipo de cosas. Por ejemplo, esta puesta de sol en la ciudad se puede hacer nuevamente, haciendo un bucle y estableciendo el color, dibujando rectángulos rellenos. En este caso, dibuja el fondo durante el primer fotograma de una manera un poco diferente que los edificios, y cada edificio se dibuja mediante una cuadrícula de cuadrados que alternan entre negro y coloreado para las ventanas, y se mezclan y se dibujan de arriba a abajo para crear un efecto de paisaje urbano. Realmente me encanta cómo resultó este. Una de las cosas más recientes que hemos podido hacer en Twitter es el raycasting para empujar realmente los límites de lo que es posible. Incluso he hecho un sistema de raycasting de alta definición en Twitter, como este tweet aquí que dibuja una ciudad y tiene sombras y texturas también, utilizando ese código a la derecha. He hecho todo tipo de paisajes de árboles diferentes, como esta escena del lago de árboles. Y con ayuda de la comunidad, logramos reducirlo de 194 caracteres a solo 119 bytes. Es bastante interesante cómo funciona este y cómo genera un número aleatorio, por ejemplo. Definitivamente vale la pena investigarlo. Se dibuja de izquierda a derecha para los árboles, el primer fotograma es donde dibuja las estrellas o el tipo de reflejo y las líneas verticales u horizontales.

La escritura asemica es cuando tienes una escritura que parece realista y significa algo, pero en realidad es falsa. Juego mucho con eso en Twitter. Creo que es un tema divertido.

Por ejemplo, si quieres crear un sistema de escritura super pequeño, logré reducirlo a lo esencial aquí. Decidir dónde habrá interrupciones en la escritura es la primera línea, y luego comenzar y detener esa línea usando un fill begin path. El resto consiste en dibujar esta línea garabateada, que se mueve de izquierda a derecha y de arriba a abajo, y circula con diferentes coeficientes.

Incluso he logrado representar personas diminutas corriendo, saltando y peleando. Puedes representar una persona diminuta pensando en ellas como dibujar cuatro líneas. Para las cuatro extremidades, comienzas en la parte superior de la cabeza, dibujas hacia abajo y cada una de esas líneas es una serie de puntos. Tienes una cabeza, hombro, codo, mano, y lo mismo para el otro brazo, solo que un poco desplazado, y las piernas son un poco más largas, pero en última instancia se utiliza el mismo código.

He creado muchas ilusiones ópticas e incluso una ilusión óptica del año, la ilusión de rotación de ejes duales, que originalmente publiqué en Twitter. He hecho muchos tipos diferentes de paisajes. Son realmente divertidos de explorar. Los sistemas caóticos pueden tener resultados muy interesantes. Me encanta lo impredecibles que son. Las simulaciones de física encajan muy bien en un tweet, como partículas o cosas rebotando en el agua, o incluso una especie de física pseudo. He hecho todo tipo de árboles, desde palmeras hasta bambú, cosas en 3D. A menudo me inspiro en conceptos matemáticos para hacer diseños geométricos en los tweets. He hecho muchos túneles y efectos en 3D. También he creado una serie de palabras que se animan para mostrar esa palabra. Es una idea un poco extraña, pero fue muy divertido intentar encajarlas en el tweet. Hay muchos más que he hecho y que otras personas han hecho. Vale la pena ver lo que hay en Twitter. Es increíble lo que hemos logrado y seguimos generando nuevas ideas todo el tiempo.

Entonces, tal vez hayas visto toda esta presentación y estés pensando, ¿por qué escribir TinyCode? Bueno, te puedo decir que es divertido y relajante. Es una de mis cosas favoritas para hacer. También te ayudará a mejorar tus habilidades de programación. Podrás practicar la prototipación de ideas y ser mucho más rápido para hacer que las cosas sucedan. También hay una comunidad a la que puedes unirte e incluso desafiarte con competiciones como la escena de demostración. Hoy tengo un desafío para ti, que es unirte al movimiento TinyCode creando tu propio arte en 140 caracteres y compartirlo en las redes sociales con el hashtag TinyCode.

¿Cuál es el futuro de TinyCode? Constantemente descubrimos nuevas técnicas geniales para hacer posible cosas nuevas y el soporte del navegador también está mejorando, lo que significa que se verá igual en diferentes navegadores y dispositivos móviles. Por supuesto, el lenguaje JavaScript está en constante evolución, lo que significa que a medida que se agregan nuevas funciones, tal vez tengamos más oportunidades de encajar cosas en ese espacio. Y las computadoras también están volviéndose más rápidas, por lo que podemos obtener una salida de mayor resolución y realizar simulaciones más complejas utilizando la misma cantidad de código. Y una de las cosas más nuevas que está sucediendo es la programación asistida por IA, que puede ayudar a explicar cómo funciona este TinyCode e incluso escribirlo. Eso es todo lo que tengo para compartir contigo hoy. Espero que mi charla te inspire a escribir tu propio TinyCode. Como dijo DaVinci, la simplicidad es la máxima sofisticación. Muchas gracias por ver mi charla. Sigue escribiendo código pequeño.