Dibujo Paramétrico – #2 – Drawing Apparatus

English Version.

Resulta que el último post ha abierto mi caja de pandora particular. Hay bastantes “máquinas de dibujo” ahí fuera y siento herir sensibilidades (espero que no) pero tengo la neceidad imperiosa de hablar sobre ellas xD. Hoy me gustaría empezar por una bastante simple conocida como “Drawing apparatus” (o bien “dibujando con dos tocadiscos”) diseñada por Robert Howsare. Seguro que has visto el vídeo en internet en algún momento, y sino, no se a qué estás esperando –> Sitio Oficial

En su página oficial puedes encontrar ejemplos de algunas figuras hechas con el cacharrito. Cuando vi los dibujos nació en mi el antojo de generar y digitalizar ese tipo de formas. No tengo tocadiscos pero todo lo que necesito es Matlab y un poquitín de tiempo! Hay algo que no se pueda hacer con Matlab? jojojo .La objetivo es simplemente simular el mecanismo y jugar un rato.

Como puedes ver en el video de su página web, la máquina consiste en dos vinilos girando a diferente velocidad con un mecanismo de cuatro barras anexo. Una de las articulaciones del mecanismo sujeta un lápiz que será el que pinte el patrón.

Ahora bien… un pequeño atajo. Como puedes estar pensando (y si no, aquí estoy yo para inducirte a pensarlo) la cinemática de este mecanismo se puede resolver analíticamente planteando sus ecuaciones trigonométricas, recordando las relaciones trigonométricas “chulas” y obteniendo la solución. Sinceramente, no soy demasiado amigo de los cosenos así que optaré por calcular las posiciones de forma “iterativa”.

Además, estos días he estado aprendiendo a generar pequeñas interfaces gráficas con Matlab, así que aprovecharé este mini proyecto para entrenar un poco más. La idea de la interfaz gráfica es poder modificar los parámetros relativos a la geometría y operación del mecanismo (y por tanto el resultado). Lo siguiente es una captura de cómo se ve la aplicación (por cierto el código disponible aquí).

Una vez especificada la geometría, se puede dibujar el mecanismo (parado) para chequear que todo está bien y comenzar la simulación. Se genera una animación para ver el mecanismo funcionando.

Solo un par de comentarios adiconales antes de irme. El primero relativo a las velocidades. Hay que tener en cuenta que no todas las velocidades funcionan “bien”. Dependiendo de los valores, el resultado será má so menos interesante. No puedo dar una regla de oro pero, como consejo general, se debería intentar escoger velocidades cuyo ciclo de repetición sea largo. Por ejemplo, si estableces una velocidad de 1 y 2, en cuestión de dos vueltas el mecanismo está justo en la misma posición que al principio, por lo que el patrón no será demasiado interesante.

Finalmente, esto se puede usar en Illustrator para hacer un poco de magia? Pues SI! en Matlab se pueden guardar las figuras en formato *.eps usando el comando “print”. Básicamente eso es lo que hace el botón etiquetado como “Save” de la interfaz. Obviamente, una vez en illustrator, podemos hacer lo que sea con el gráfico. He aquí mi intento:

Hay otras máquinas de dibujo más locas que estas, y espero escribir sobre ellas en futuros posts. Espero que te haya interesado el post, y que propongas lo que sea en los comentarios. Nos vemos pronto!.

Cuidate!.

Dibujo Paramétrico #1

English version.

Resulta que  el tiempo vuela, y los exámes proveen las alas. Como suele pasar, los exámenes consumen todo el tiempo que pueden y por tanto, poco espacio libre queda para poder preparar post más o menos elaborados. No obstante de vez en cuando toca respirar aire, y os traigo el resultado del último “descansito”.

El tema es que, probablemente debido a lo que hago a diario, hecho en falta en Illustrator la posibilidad de vincular parámetros a trazos. De esta forma, sería posible preparar diseños adaptativos en los que, cambiando un número, el diseño cambiase.

Con esa idea en mente, decidí hacer un par de pruebas en Matlab y, en vista de los resultados, creo que haré más cosillas de estas en el futuro :). La imagen del final del post, está generada simplemente definiendo la posición y radio de un conjunto de círculos (código disponible aquí). En otras palabras, dado la evolución de , , y  (siguiente figura),

generar cosas como esta:

Una vez generadas, nos vamos a Photoshop a hacer un poco de mágia…
Resumiendo, Matlab + mente en modo “exámenes” + Photoshop =

Que tengáis buena semana!

 

 

 

DIY: Scanimations

English version.

Resulta que acabo de abrir los ojos y es 2015! (feliz año nuevo por cierto). La consecuencia de las navidades es una cola de posts pendientes esperando a que los exámenes me dejen un par de minutillos libres para ser escritos (además de un par de kilitos de polvorones).

Estas Navidades, buscando algún regalo creativo encontré un par de vídeos que me llamaron la atención. Seguramente los hayas visto alguna vez… En el vídeo se veía cómo con una lámina de acetato en la que había impresa una especia de “código de barras” y un folio con una “imagen codificada” se generaba una animación al mover una capa sobre la otra. Tal como leí en algún sitio, parecía un gif sacado de la pantalla. Tras un poco de investigación di con el nombre de la criatura (tambores)… Scanimation! Resulta que es el nombre que reciben estas animaciones (basadas en algo llamado “patrones de Marié” (wiki)).

Es muy interesante cómo algo tan aparentemente simple puede generar tal efecto así que, rápidamente me puse manos a la obra para ver si era capaz de hacer uno “hecho en casa”! Como intuirás, las herramientas que utilicé son Photoshpo, Illustrator (opcional), y en este caso Matlab, y parece que me he acercado a la solución (siento la mala calidad pero si no quería postear imágenes demasiado pesadas es lo que hay 😦 , para verlo un poco mejor -> Youtube ) :

Figura 1: Ejemplo.

El mecanismo es muy simple. La historia está en que según la posición en la que esté el acetato, solo podamos ver UN frame de la animación. Dicho esto, un hipotético flujo de trabajo podría ser:

1. Coger un frame de la animación.
2. Poner el acetato encima en una posición.
3. Eliminar el contenido del frame que queda oculto por las columnas opacas del “código de barras”.
4. Desplazar el acetato a una nueva posición y volver al paso #1 (con el siguiente frame).

Como podrás imaginar, hay un par de problemas que hay que resolver antes de pasar a la acción. Más específicamente, problemas relacionados con cómo generar el código de barras “mágico”?… bien, como puedes ver en la animación anterior, el código de barras que se desliza es un patrón repetitivo, por tanto, con fijar el ancho de las columnas transparentes-opacas es suficiente no? Obviamente es justo ahí donde está la miga del asunto. Para conseguir generar el efecto, la relación entre el ancho de las columnas opacas y el ancho de las columnas transparentes viene fijado por el número de frames que tenga la animación… QUÉÉ?… nada.. que el grosor de las columnas negras depende del grosor de las columnas transparentes, y además del número de frames que tenga la animación. En caso de tener una animación con  frames, debe cumplirse lo siguiente:

Por tanto, para generar el patrón del acetato, lo primero que tenemos que hacer es fijar el ancho de la columna transparente y lo demás viene rodado. Ahora bien… Qué ancho le damos a esa columna?… malas noticias… no hay una respuesta genérica a esa pregunta, depende. Depende de si pretendes ver el efecto en el ordenador o por contra lo quieres imprimir; y también dependerá del tamaño y resolución de la propia imagen. Normalmente mientrás más finas sean las columnas, mejor será el resultado pero OJO!, si imprimes un patrón con separaciones de 1 pixel… dudo que el resultado sea el esperado.

Figure 2: Scanimations de la misma animación generadas con tres anchos diferentes.

Vengo de la escuela de “10 minutos de trabajo extra hoy, para trabajar sólo un minuto mañana” así que, en lugar de crear una scanimation a mano, me fuí a Matlab y escribí un pequeño código (próximamente en C, que creo que será más accesible) para generar esto de forma automática así que, aquí tienes un pequeño tutorial de cómo hacerlo funcionar (recursos disponibles aquí).

• Genera los frames que forman la animación.
• (CUIDADO) Guarda los frames nombrados secuencialmente (1.jpg, 2.jpg 3.jpg, etc). Es importante para que el código funcione corretamente.
• Sitúa el archivo “pattern.m” en la misma carpeta donde tienes las imágenes.
• Abre Matlab y sitúate en la carpeta de trabajo.
• Ejecuta la función de la siguiente manera: “pattern( número_de_frames , Ancho_columna_Transparente_(en_pixels))“
• Esto generará dos archivos .png uno con el patrón y otro con la animación codificada.
• (Opcional) En caso de que quieras ver el efecto en el ordenador, simplemente tienes que abrir Photoshop, situar ambas imágenes en capas diferentes y mover la “capa acetato”.

No creas que la única forma de ver el efecto es deslizando una capa sobre otra. En este asunto, la “perspectiva” juega de nuestra parte. Si colocamos las capas con una pequeña separación entre ellas, seremos capaces de percibir el efecto moviéndonos a su alrededor. El siguiente vídeo contiene un ejemplo práctico bastante vistoso.

Y esto es todo! Como siempre, espero que haya resultado interesante y te invito a añadir o preguntar cualquier cosa en los comentarios.

Cuídate.

Ps & Ai #1 – Gif

English version
Resulta que a veces necesito generar pequeños fragmentos de vídeos para testear algunos algoritmos y hacer cosas malas. Obviamente Internet es infinito y no es difícil encontrar la imagen apropiada. Sin embargo, con esta obsesión que manifiesto por aprender cómo se hace todo (sin dramatismos jojo), me interesaba qué son exactamente, y cómo se pueden crear esos pequeños fragmentos de vídeos animados que todos conocemos como gifs.

Fuente: Wikipedia

Quieres leer una definición rápida de qué es “cualquier cosa”? Wikipedia al rescate! (link). Resumiendo mucho, Wikipedia dice que un gif es una formato de imagen altamente compatible, que soporta animaciones y tiene ciertas limitaciones en cuanto a los colores que muestra. (i) El hecho de que soporta animaciones implica que de alguna manera, un archivo *.gif tiene que almacenar información de varios frames para generar dicha animación (animaciones largas, conllevarán archivos más pesados), y (ii) la limitación de color, entre otras cosas, implica que mientras más colores contenga el gif, de nuevo mayor es su tamaño.

Nuestro objetivo hoy es saber cómo crear un gif animado con photoshop así que, parece una buena idea empezar abriendo un gif con photoshop a ver qué pasa. Si lo hacemos veremos que el gif, tal y como esperábamos, contiene tantas capas como frames tiene la animación! Empezamos bien!

Ok… ahí está la información, pero cómo se reproduce? Para responder a esta pregunta tenemos que abrir la “línea de tiempo”. Para ello vamos a “ventana -> Línea de tiempo”

Tras hacer esto, en la parte inferior veremos una nueva ventana con todos los frames que generan la animación ordenados. Seleccionando cada frames observamos que cada frame difiere del anterior en la capa que tiene visible.

Pues ya está no? Parece fácil. Manos a la obra! Los archivos usados para generar los resultados que se muestran pueden descargarse aquí -> Files

Vayamos paso a paso. Primero, nos vamos a Illustrator y generamos los gráficos. Como imaginarás, cada capa del archivo de illustrator corresponderá a un frame distinto.

Luego, puesto que queremos abrir esto en photoshop, vamos (en Illustrator) a “Archivo -> Extraer” y especificamos “tipo: Potoshop”. De esta forma tendremos un archivo *.ps que guarda la información de las capas. Una vez abierto en photoshop, hacer una animación desde las capas es tan simple como irse a la ventana de la línea de tiempo y hacer click en “Crear animación de cuadro” y luego ir a la pequeña flecha hacia abajo situada en la esquina superior derecha de la ventana de la línea de tiempo y seleccionar “Crear cuadros a partir de capas”. Tras esto ya tendremos nuestra linea de tiempo casi lista. Llegados a este punto podemos cambiar varias propiedades como por ejemplo la duración de cada frame y, obviamente, su apariencia. Si quieres visualizar la animación lo puedes hacer haciendo uso de los controles situados en la esquina inferior izquierda de la ventana de línea de tiempo.

Aviso!!: si quieres que tu gif animado sea “infinito”, tienes que especificarlo con un pequeño cuadro a la izqueirda de los controles de reproducción (aunque también se puede cambiar en la última ventana antes de guardar).

Finalmente para guardar nuestro gif vamos a “Archivos -> Guardar para Web”. Aparecerá una nueva ventana donde podremos especificar varias propiedades, como por ejemplo, el tipo de archivo (Gif), e información referente al número de colores que se muestran en la imagen. Cambiando estas propiedades puede observarse el efecto que tiene sobre el tamaño del archivo.

Fin!, el resultado es un gif “impresionante” (xD). Ahora ya no hay excusas, para aportar gifs personalizados a Internet!

Os invito a hacer vuestros propios gifs y compartirlos en los comentarios!

Feliz Navidad!.