llops blog » Lab

Palabras

llops — Mon, 28 Sep 2009 22:59:23 +0000

Desde que empecé a programar, cada vez que veía una composición tipográfica, un collage de palabras o una letra imposible, me quedaba pensando qué básico y limitado es el texto en la web. Incluso en Flash, siempre un par de pasos por delante en cuanto a gráficos se refiere, estamos sometidos a una caja de texto. Por más que le daba vueltas nunca se me ocurría una manera diferente de generar texto. Al menos hasta que Flash 8 introdujo la clase Bitmap, y ahí empecé a imaginarme un posible camino.

Básicamente lo que quería conseguir era que partiendo de cualquier tipografía y utilizando cualquier motivo, se pudiera representar cualquier texto de forma legible (y obviamente, de forma dinámica, que sino ya está photoshop). Y aquí está una demostración:

Los motivos que he escogido para este experimento son corazones, hojas, trazos y manchas de sangre; y las fuentes Supernova, Eras Demi, Kristen y Saginaw.

Nota: una vez elegido un motivo y el idioma, la única forma de volver a la home es clicar en “Recargar” o refrescar la página. Me daba muuucha pereza tener que limpiar todos los recursos para dejar el experimento en el inicio :p

Puedes ver el experimento aquí

7 comentarios
Compartir en Twitter | Compartir en Facebook

© llops blog 2009

La Planta de Viento

llops — Thu, 26 Mar 2009 00:25:52 +0000

En el post anterior hablaba de las plantas de IKEA. Pues bien, aquí está la primera: La Planta de Viento.

Como ya comenté, la original es una aplicación AIR, pero como de momento no puedo poner el .air para descargar he decidido adaptarla para navegador. Así se pierden algunas opciones y la gracia de tenerla en el escritorio, pero el resto es básicamente igual.

Algo sobre el desarrollo

Empecé este desarrollo en enero de 2008 (la teconología AIR todavía estaba en el Lab de Adobe) y, aunque a primera vista quizá no lo parezca, estuve con él casi cerca de 3 meses! Yo diría que hubo 3 motivos clave por los cuales se prolongó tanto:

No era un proyecto en el que estuviera a full-time, llegando a estar periodos de 3-4 días sin tocarlo (con lo que cuesta coger el hilo tras un parón…)
No partimos de ninguna base gráfica para llegar al resultado final. Desde el principio toda la planta se construyó a partir de la programación: el tallo, la corola, las anteras, las composiciones de las 3 flores… Hasta que todos estuvimos satisfechos con el aspecto del diente de león tuve que hacer muchas muchas pruebas. El tiesto y el panel fue lo único que vino diseñado.
La interactividad se fraguó sobre la marcha: la relación entra la planta y el mouse, la fuerza del “viento”, la elasticidad de los tallos, la pérdida de los filamentos, la regeneración, las explosiones finales… Si me hubieran dado un euro por cada vez que compilé…

Así que una vez que estuvo cerrada, empaquetada y lista para mandar, fue como quitarse un peso gigante de encima. Eso sí, a pesar de lo cansado que fue en algunos momentos, de los proyectos en los que he participado como (seguramente mal llamado) “programador creativo”, sin duda alguna es uno de los que más he disfrutado.

Y por último, esta guerra no fue sólo mía. Estuvo Román como arte, asegurándose que ningún píxel se salía de lugar, Castellote aportando poesía, Rafa Soto dándole el acabado imposible (siento que no lo consiguieras! xD ) y el señor Carlos Torrecilla echándonos un gran cable con el audio.

>> Ver La Planta de Viento

4 comentarios
Compartir en Twitter | Compartir en Facebook

© llops blog 2009

Gomets

llops — Thu, 23 Oct 2008 14:19:37 +0000

Sin darme cuenta han pasado 7 meses desde que publiqué la última pieza del Lab, todo un mundo teniendo en cuenta que uno de los objetivos de este blog era precisamente dar salida a estos pequeños proyectos. Podría echarle la culpa a la falta de tiempo (que no es que sea mentira tampoco), pero hay otro factor que influye mucho, y es el de la búsqueda del “siempre más difícil”, con lo que varios experimentos se quedan a medias por no pasar el filtro.

Suerte que de vez en cuando hago algo como Gomets que me recuerda que el nivel de la idea siempre prevalece sobre el nivel técnico. Una pieza puede ser atractiva, plástica o entrañable sin necesidad de código muy complejo.

Gomets es un experiencia no interactiva donde pequeñas redondas de colores (de ahí el nombre) se mueven, fusionan, repelen… formando diferentes efectos visuales. Todo el código se centra básicamente en movimientos elípticos jugando con parámetros como el ángulo, la velocidad o el radio.

También cuenta con un panel de opciones para configurar los comportamientos. Si se le dedica 5 minutos a investigar cómo funcionan se pueden encontrar combinaciones muy gustosas.

Y he de darle las gracias a mi mejor betatester, por sus consejos, por la paleta de colores, por el naming… media aplicación vaya! ;)

Puedes ver la pieza aquí.

6 comentarios
Compartir en Twitter | Compartir en Facebook

© llops blog 2008

Punteros

llops — Wed, 05 Mar 2008 14:37:49 +0000

Hace poco tuve que programar un banner en el que 20 punteros se movían aleatoriamente.

Partiendo de esta base, he pulido un poco más el movimiento, los he dotado de interactividad y he añadido un centenar. El resultado es una nueva pieza para el Lab:

Los punteros fluyen libremente, pero si dejas pulsado el botón del mouse pasas a controlarlos. Únicamente con press y release puedes crear diferentes figuras y composiciones.

Y para darle un poco más de gracia al asunto, he creado un panel que se conecta con la API de Kuler* y obtiene paletas de colores al azar. De esta manera se pueden cambiar los colores de los punteros dinámicamente.

Pueden salir combinaciones muy bonitas :)

Puedes ver la pieza aquí.

* Kuler es un herramienta online de Adobe donde los usuarios pueden crear sus propias paletas de colores. El resto las pueden rankear, comentar, etc. Ha tenido tanto éxito que hicieron una API para jugar con esta fantástica aplicación. Si no la conoces, te recomiendo que le eches un vistazo ;)

14 comentarios
Compartir en Twitter | Compartir en Facebook

© llops blog 2008

Ilustraciones – Serie Sin City

llops — Thu, 10 Jan 2008 00:59:23 +0000

¿Qué se puede hacer con un canvas negro y miles de píxeles blancos?
Dejarlos fluir y esperar. Quizá se coloquen en el lugar adecuado…

Serie dedicada a uno de los comics de culto: Sin City, de Frank Miller.

12 comentarios
Compartir en Twitter | Compartir en Facebook

© llops blog 2008

Luz

llops — Thu, 13 Dec 2007 09:46:26 +0000

Hay dos tipos de cuerpos visibles: los que emiten luz por sí mismos y los que la reflejan. La luz se compone de minúsculas partículas denominadas fotones, y el color de estos fotones viene determinado por su energía y su frecuencia.

Las partículas aisladas son imperceptibles para el ojo humano, pero si actúan en conjunto crean una corriente de fotones. Así nace luz.

Elástica

llops — Sat, 01 Dec 2007 16:00:13 +0000

Siempre me han gustado esas piezas que transforman el mouse en un pincel y el escenario en un lienzo. Si están bien realizadas y tienen ese toque “gustosillo” se me pasan los minutos jugando sin darme cuenta.

Aquí una versión en la que gradualmente se borra lo pintado. La idea detrás de esto es redibujar continuamente los vectores sobre un bitmap y manipularlo con filtros para conseguir los fundidos.

Con cada click se modifican los valores de elasticidad y velocidad.

Barrido ondulatorio

llops — Sat, 01 Dec 2007 11:00:22 +0000

Mientras programaba Ventisca de píxels, fui haciendo diferentes versiones siguiendo el mismo camino: composición de imágenes mediante píxels en movimiento.

Aquí pongo otra pieza que me gustó bastante:

Ventisca de píxels

llops — Sat, 01 Dec 2007 09:00:39 +0000

La idea surge de un experimento que hizo un excompañero de Herraiz&Soto, que jugaba con la manipulación de píxels para formar imágenes. Lo programó a principio del 2005 en Java, pero no llegó a ver la luz.

Con la salida de AS3 me decidí a hacer mi propia versión (realmente lo podía haber hecho a partir de Flash 8, que permitía manipulación a nivel de píxel, pero ni hablar de la diferencia de rendimiento…).

Con esta primera pieza queda inaugurado el Lab :)

Nota para los que conocéis mi manejo del photoshop: aunque no os lo creáis, la composición es mía ¬¬