Noticias

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

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:

“Después de tres horas, teníamos un reloj digital en funcionamiento […] pero mi cerebro siguió dando vueltas al tema: un reloj está bien, pero teóricamente, podrías crear cualquier cosa de esta manera. ¿O no?”.

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.

“Las casillas de verificación no fueron diseñadas exactamente para esto. […] ‘Si al menos hubiera una biblioteca que pudiera ayudar a hacer esto’, pensaba”.

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

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.

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:

“Si pudiera mostrar cualquier imagen, entonces no tendría que pasar por el laborioso proceso de definir cada casilla de verificación manualmente o crear un algoritmo para la escena que quería”.

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:

“Pronto me di cuenta de que convertir imágenes supone recorrer el 90% del camino hacia la conversión de vídeo, así que esa se convirtió en mi próxima tarea”.

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); } })();


La noticia Esta librería JavaScript te permite crear animaciones con casillas de verificación HTML (o usarlas para convertir imagen y vídeo) fue publicada originalmente en Genbeta por Marcos Merino .

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button