Ciber Geek > Diseño > D3.js, diseño de indumentaria basado en patrones y números aleatorios

D3.js, diseño de indumentaria basado en patrones y números aleatorios

D3.js es una de las librerías mas populares de Javascript al momento de trabajar con gráficos, si bien no es la única, de las que probé, es sin dudas la más poderosa, lo cual no siempre es bueno, si quieren algo simple usen Chart.js.

¿Diseño de indumentaria? Discúlpame el atrevimiento pero ¿estás drogado?

No, bah, no sé, no, pero creo que no. Ok, arreglado el asunto los interiorizo un poco en mis delirios. Resulta que el otro día me llamó la atención el diseño de un short de Nike el cual es bastante peculiar, AD Pixelamo és el nombre de ésta belleza. Y lo primero que se me paso por la mente es que éste tipo de diseño puede ser “creado al azar”, lo cual me llevo a mas delirios místicos.

nike ad pixelamo

Ok, ésto parece una propaganda.

AD Pixelamo, con D3.js

Por suerte D3 hace todo tan fácil que en unos minutos ya tenía un prototipo funcionando, y obtuve resultados bastante buenos.

patron pixelamo rojo

Pixelamo con D3.js

La función básicamente genera un numero al “azar” entre 50 y 200, y se lo asigna a la primera componente de un vector RGB, que se corresponde con el color rojo. Si le asignamos el numero a la componente correspondiente al color verde, obtenemos lo siguiente.

pixelamo verde

Así se ve Hulk cuando le hacen zoom

El código del prototipo.

Bueno, hacer un montón de cuadrados de colores puede no parecerles muy interesante, así que para hacer mas divertidos éstos patrones estoy haciendo un plugin para WordPress para facilitar el agregado de código Javascript a los posts, ya que necesito un plugin que me permita añadir varios scripts, elegir el orden y que me de la opción de elegir la ubicación. Además, no quiero que los scripts se agreguen a todos los posts como hacen algunos plugins que andan dando vueltas por ahí.