Esta librería JavaScript te permite crear animaciones con casillas de verificación HTML (o usarlas para convertir imagen y vídeo)

17/10/2021Artículo original

Esta librería JavaScript te permite crear animaciones con casillas de verificación HTML (o usarlas para convertir imagen y vídeo)

Bryan Braun es un desarrollador web frontend que, hace dos años, tuvo un momento de inspiración al ver un ‘letrero de píxeles mecánicos en blanco y negro’ cerca de su oficina: decidió que podía y debía hacer algo parecido… pero en HTML, usando casillas de verificación a modo de píxeles:

Pero, a pesar del potencial de la idea, Braun reconoce que resultaba difícil mostrar tantas casillas de manera correcta y consistente en varios navegadores web.

De modo que, unos meses más tarde, Braun convirtió esa idea en Checkboxland, una librería JavaScript que permite “representar texto, animaciones y casi cualquier cosa utilizando únicamente casillas de verificación HTML”:

Cuando Braun presentó Checkboxland al mundo, en verano de 2020, aclaraba que “en el futuro, espero dedicar mi tiempo a actividades más valiosas, pero […] a veces el mundo necesita cosas raras y divertidas”. Y claramente, esta última reflexión he pesado más que la primera, porque un año más tarde, ha sorprendido a Internet mostrando varios ejemplos de lo que había logrado mejorando su biblioteca

  Machine Learning: ¿Qué es y para qué sirve el análisis exploratorio? (con un ejemplo para que lo veas claro)

usando matemáticas para lograr animaciones con patrones regulares

…o implementando animaciones interactivas que reaccionan a los clics del usuario (que puedes probar aquí), lo cual le hizo darse cuenta de que estaba en su mano crear juegos como el Pong, el Tetris o Snake.

Los 10 Frameworks/Librerías más populares de JavascriptEn GenbetaLos 10 Frameworks/Librerías más populares de Javascript

Un paso más allá: imagen y vídeo

Pero antes de empezar a hacer progresos en el desarrollo de videojuegos mediante casillas de verificación, otra idea le empezó a rondar por la mente:

Cbl Apple

Y así, recurriendo a documentación disponible sobre la conversión de imágenes en texto ASCII, Braun logró usar su biblioteca JavaScript para convertir imágenes simples en casillas de verificación. Y claro, el siguiente paso era inevitable:

  Los 15 eventos para desarrolladores en España que no te puedes perder en 2018

Muy pronto eso se tradujo en nuevos cambios en la API de Checkboxland para poder “cargar cualquier vídeo y generar instantáneamente una versión con casillas de verificación“. De hecho, podemos probar en su web esta funcionalidad, usándola para convertir cualquier vídeo que subamos.

Y, por si esto no fuera suficiente, también ha creado un filtro de webcam para convertir sobre la marcha la señal de vídeo de la misma en —sí, efectivamente— más casillas de verificación. Aquí la prueba:

(function() { window._JS_MODULES = window._JS_MODULES || {}; var headElement = document.getElementsByTagName(‘head’)[0]; if (_JS_MODULES.instagram) { var instagramScript = document.createElement(‘script’); instagramScript.src = ‘https://platform.instagram.com/en_US/embeds.js’; instagramScript.async = true; instagramScript.defer = true; headElement.appendChild(instagramScript); } })();

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad