FelizNavidad.js

Bienvenidos queridos lectores al que será mi último rootie de este 2016. Por estas fechas no me apetecía escribir de nada técnico, así que he elegido un tema misceláneo. Hace unos días me topé con un recurso web que me llamó la atención, y sin duda pensé en compartirlo con vosotros.

¿De qué se trata y por qué en el título aparece .js?

Por supuesto es algo relacionado con el mundo IT. Navegando por Reddit me topé con este repositorio, en el cual consiguen desarrollar un árbol navideño únicamente mediante JavaScript y la ayuda inestimable de nuestras amigas las fórmulas matemáticas.

Os muestro el resultado en un -como no podía ser de otra manera- gif:

El efecto es asombroso, una transición infinita muy elegante de dos espirales que se cruzan en la copa del árbol.

Me he tomado la libertad de copiar el código en un codepen para poder insertarlo aquí y que veáis el código JS en acción:

1

¿Cómo está hecho?

El árbol está construido por dos espirales. Estas 11 líneas de código

renderizan una línea en espiral. Incluye una proyección 3D y una sombra de fondo. Casi lo mismo que esta imagen de la wikipedia:

descripcion espirales javascript

Se define z como una función de x y de y en coordenadas polares (definidos un radiovector y un ángulo, r y phy. Se puede ver la asociación de las coordenadas polares y las cartesianas en la segunda y la tercera línea (las coordenadas polares y las cartesianas son equivalentes; básicamente está poniendo de dos formas la misma función de z. Lo que importa es el parámetro que define la fase (una fase en un instante dado indica el ángulo de un radiovector). A ese parámetro se le llama t (como se podría llamar lambda o ñ, es lo mismo). pero al llamarle t ayuda a entender o a pensarlo como dependiente del tiempo.

 

Sin más dilación, espero que os haya gustado y que podáis descansar y disfrutar unas felices fiestas.

¡Nos vemos en 2017!

cuelga la llamada

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *