Author: Miguel Mesa LAC

De regalo, y mientras resuelvo lo de la sesión nº11, os dejo unos ‘downloaders’ inspirados en lo que se ve por ahí. Un downloader es el típico icono móvil que aparece dando vueltecitas mientras se carga una página o lo que sea. He creado algunos circulares y algunos lineales. Llevan pocos comentarios, pero dados vuestros avanzados conocimientos de processing podréis analizarlos sin muchos problemas. El RAR con los sketches se llama Dia13(contadores) y podéis acceder a él pinchando aquí.

Comentarios a los ejercicios:

• Contadores circulares: Tenemos tres ejemplos, copiados de macintosh, youtube y nero (el programa de copiar CDs). El más sencillo es el de nero (versión 8), que no usa classes ni nada por el estilo; es un arco de color rojo que va recorriendo un círculo de color gris oscuro. El de macintosh consiste en unas líneas radiales de color gris que se van dibujando en negro por turnos según avanza el tiempo. El de youtube son circulitos rellenos de grises de distinta intensidad. Estos dos últimos se basan en el uso de classes (programación orientada a objetos).
• Contadores lineales: El ejemplo que se llama Contador_Lineal consiste en una colección de cuadritos de color que se van dibujando de izquierda a derecha hasta formar una tira completa; al llegar al final la tira se vacía y vuelven a empezar. El otro ejemplo se llama Contador_Amortiguado y es un estudio para crear una tira que va y viene de izquierda a derecha, rebotando en los extremos y produciendo un amortiguamiento al acercarse y alejarse de ellos; se basa en el uso de la función coseno. Está sin terminar, y sería un ejercicio interesante para vosotros completarlo con más cuadritos que vayan siguiendo al principal.

En realidad los preparé para verlos durante el curso, pero no encontré el hueco para colarlos. Echadles un vistacillo, pueden ser interesantes. 

Saludos // Álvaro

Hola de nuevo. En el RAR de la sesión del día 12 (sesión inexistente) os he puesto como complemento al curso unos ejercicios de 3D donde se pueden mover los objetos y/o la cámara usando el ratón. Esto no lo hemos visto en clase, pero os los dejo ahí como semilla para intentar comprender los mecanismos del trabajo en 3 dimensiones.

Para operar en un entorno 3D hay dos maneras de actuar, y las dos se establecen en la función size(), dentro del setup():

• definiendo size(ancho, alto, P3D) nos permite hacer uso de las funciones 3D, pero con una resolución muy baja, aunque con un buen rendimiento (velocidad de proceso). No es necesario cargar ninguna librería.
• definiendo size(ancho, alto, OPENGL) nos permite las mismas funcionalidades pero con una buena resolución, a costa de sacrificar la velocidad (si el sketch es muy complejo). Para usar el opengl hay que cargar previamente la librería opengl correspondiente (se puede hacer en el menú Sketch > Import library > opengl)

Los ejemplos contenidos en el RAR, que podéis descargar aquí, os los describo a continuación:

• Ejercicio P3D_Basico: Cámara fija y objetos móviles. Tres pares esfera-caja giran haciendo clic con el botón izquierdo del ratón y moviéndolo en el eje X. Cada uno de los tres pares gira en torno a uno de los tres ejes espaciales X-Y-Z. Con el botón derecho restauramos la posición inicial. Pulsando la tecla ‘w’ conmutamos entre modo alámbrico y modo sólido. El texto en la parte inferior izquierda nos indica el valor actual del ángulo de rotación.
• Ejercicio P3D_Matriz: Cámara fija y matriz de objetos móviles. En el espacio 3D hay una matriz de 3x3x3 esferas que giran lentamente sobre su eje Y. Haciendo clic con el ratón movemos el conjunto produciendo un giro en torno a los ejes X e Y. En la class ‘Caja’, en el método ‘display’, se puede cambiar la esfera por un box.
• Ejercicio P3D_Camara: Cámara móvil y objeto móvil. Tres ejes espaciales de coordenadas X-Y-Z se representan con los colores R-G-B. Pulsando el botón central del mouse hacemos rotar la cámara en torno al origen de coordenadas. Con el botón izquierdo movemos el cubo en el plano X-Y. Con el botón derecho restauramos el cubo a las coordenadas 0,0. En esto ejemplo también está activada la iluminación y hay una luz direccional. Unos textos informativos en pantalla nos dan información sobre ángulos de giro y coordenadas, así como una mini-ayuda.

Espero que os sirva de motivación para investigar un poco. Ya sólo me queda por subiros al sitio de descargas los ejemplos que vimos en la última sesión, la número 11, el día 7 de abril. Estoy a la espera de que Carlos Bañón me pase los sketches para ‘arreglarlos’ un poco y simplificar su comprensión. En cuanto tenga esto resuelto lo subo.

Hasta luego  //  Álvaro

Ya están TODOS los ejercicios del pasado día 31 de marzo, sesión nº10, dedicados al tratamiento de imágenes con processing. Como siempre, podéis descargar el RAR haciendo clic aquí.

• Ejercicio E23: Uso de la función tint() para aplicar transparencia a una imagen. Consultad el capítulo ‘Image 1’, página 95.
• Ejercicio E24: Creación de animaciones a partir de imágenes. Al ser muchas fotos las que hay que procesar lo más conveniente es guardarlas en un array de imágenes para facilitar la tarea. Interesante uso de la función frameRate(), de la constante frameCount y del operador % (módulo). Más ejemplos en el capítulo ‘Image 2’, página 315.
• Ejercicio E25: Uso de la función get() para obtener información de un píxel determinado. En este ejemplo se ‘pixeliza’ una imagen y se redibuja mediante rectángulos o círculos. Es interactivo. Leeros el capítulo ‘Image 3’, en la página 321.
• Ejercicios E26 (a y b): Empleo de la función filter() con un par de tipos de filtros (THRESHOLD y POSTERIZE). Las funciones blend() y copy() no las hemos estudiado en clase, pero podéis mirarlas vosotros. Más información en el capítulo ‘Image4’, página 347.
• Ejercicio E27: Empleo de la función mask(), también correspondiente al capítulo ‘Image 4’. En una máscara, el color blanco es opaco y el negro transparente, y los grises intermedios son semitransparentes.
• Ejercicio E28: Semejante al E27, pero la máscara se crea mediante una pantalla virtual PGraphics, útil herramienta para dibujar en segundo plano. En este caso el archivo jpg con la máscara no existe, sino que se crea virtualmente.
• Ejercicio E29: Ejemplo de ‘pixelizado’ realizando un análisis de píxeles adyacentes para obtener un color final para el píxel. Dicho análisis se denomina “convolution” y está descrito en el capítulo Image 5, en las páginas 360 a 363. El sketch es interactivo y tiene una pantalla de ayuda pulsando la tecla H. Podéis cargar otras imágenes para ver cómo se comportan. En la carpeta ‘data’ hay dos.

Álvaro

Buenas. He puesto en el ftp un resumen de lo que vimos el día 24 de marzo en clase, sesión nº9. En el archivo rar (que podéis descargar aquí) hay tres carpetas, que detallo a continuación:

• applets para la web: aquí está lo que crea Processing con la opción “Export” listo para subir a la web (también podéis obtenerlo vosotros mismos a partir de vuestros propios ejercicios). Como sabéis, la exportación del applet ‘tal cual’ no necesita modificaciones, e incluye vínculos para descargar los ficheros de código (.pde) y acceder a la página oficial de processing.org.
• applications para windows: aquí está lo que crea Processing con la opción “Export application”, que es un fichero exe y una subcarpeta llamada ‘lib’ con los archivos jar necesarios para que funcione el exe. La otra subcarpeta (llamada source) contiene el código fuente, por si queréis distribuirlo, pero no es necesaria para la ejecución del exe.
• webpage personalizada: aquí está la mini-página web que vimos en clase, que consistía en una tabla con varias celdas, en dos de las cuales habíamos colocado el trozo de código necesario para que aparecieran los sketchs de processing (recordad que cogíamos los trozos entre las etiquetas <body> y </body>). Como podéis ver, aparte del fichero htm, he colocado los ficheros jar necesarios para que puedan ejecutarse los sketch.

En cuanto al tema de las librerías, que se quedó un poco cojo, os propongo que echéis un vistazo a la carpeta ‘libraries’ de processing. Veréis que cada una de las librerías a su vez tiene otra subcarpeta llamada ‘library’, donde se aloja el grueso del código java compilado necesario para la correcta ejecución de la librería. Si podemos hablaremos un poco más de este asunto en la próxima sesión del día 31 de marzo.

Una referencia completa de las librerías incorporadas por defecto a la versión actual de processing podéis encontrarla en http://processing.org/reference/libraries/.

(Por cierto, desde el 24 de febrero está disponible para descargar una nueva revisión del programa, la número 1.0.3)

Un saludo y hasta el próximo martes  //  Álvaro

Este martes 24 de marzo dedicaremos parte de la sesión nº9 a la exportación de un sketch de processing para su publicación, tanto en forma de aplicación para windows como de plugin para una página web.

Como no dispongo de permisos para subir ficheros al blog, no se me ocurre otra solución que mandaros a visitar una página externa para verlo. Aquí tenéis los vínculos para ver los ejemplos.

• sketch estándar de processing, ejemplo 1 (partículas) >> link
• sketch estándar de processing, ejemplo 2 (cronómetro) >> link
• sketch ‘tuneado’ incluyendo los dos anteriores >> link

Además, si nos da tiempo, atacaremos de nuevo el tema del tratamiento de imágenes para avanzar contenidos de la próxima clase nº10 (31 de marzo), que por otra parte será la última conmigo, ya que la última de verdad, la nº11 (7 de abril) la dará Carlos Bañón.

Ciao  //  Álvaro

Ya están los ejemplos para el próximo día 17 de marzo (clase nº8). Veremos cómo manejar datos almacenados en archivos externos. Hay dos ejercicios, pero en realidad son más, ya que el segundo es una recopilación de pequeños trabajos anteriores (no diseñados específicamente para el curso). Pulsad aquí para descargar el archivo RAR.

• El ejercicio E21 es una interfase en forma de ficha que muestra uno a uno los datos de una base de datos (almacenada en un archivo de texto). Cada registro incluye datos de texto y una imagen. Podemos cambiar el registro con las flechas IZQ-DER del teclado o pulsando con el ratón los botones de pantalla. El botón central elige un registro aleatoriamente. Echadle un vistazo y lo desarrollaremos en clase.
• El ejercicio E22 es una carpeta que contiene cinco ejemplos, que no desarrollaremos en clase:
  • Los que se llaman USA están copiados del libro “Visualizing Data” de Ben Fry. ¡En el USA3 pulsad la barra espaciadora…!
  • El que se llama SPAIN y el Selector de mapas son estudios anteriores sobre mapas y manejo de datos asociados a ellos, inspirados en los anteriores de Ben Fry.
  • El “EC_Atlas” (Atlas de Cartografías Emergentes) es un proyecto de Miguel Mesa en el que participé como programador, pero la idea y el diseño son cosa suya, así que él os lo puede explicar mejor que yo.

Bueno, que os cunda. Un saludo.  //  Álvaro

Hola. Ya están los RAR correspondientes a las sesiones 06 (martes pasado) y 07 (martes que viene) para descargar. Pinchando aquí podéis bajarlos.

Disculpad el retraso, pero hasta esta misma mañana no he podido meterle mano al problema del martes pasado, debido a diversos asuntos acumulados.

Para los que estéis interesados en el ‘atranque’ del otro día, os comento la solución, aunque también viene explicada en el ejercicio E17b, dentro de la función draw(): Una vez llenado el array hasta el total de partículas, y para poder seguir generando nuevas, lo que hacemos es ‘correr’ todo el array hacia la izquierda, con lo cual se elimina la primera partícula, y añadimos una nueva en la última posición. La solución me la ha inspirado el ejercicio 33-14 de la página 307 del libro de reas&fry, que hace algo parecido para ir almacenando las coordenadas del mouse (por cierto, este ejercicio lo tenéis también en el rar del día 04, ejercicio E10b).

Realmente es más conveniente usar los ArrayList (ejercicio E15), porque nos evitamos tener que hacer este ‘corrimiento’ hacia la izquierda para liberar una posición.

Saludos y hasta el martes.  // Álvaro

Novedades:

Lunes 09/03/2009: He resuelto el ejercicio 17 de una forma más ‘elegante’ y sencilla. Hay que descargar el rar nº 06 de nuevo y mirar el ejercicio E17C.

Martes 10/03/2009: Ejemplo de aplicación del uso de botones (sin ‘classes’) en el nuevo ejercicio E20. Volved a descargar el rar_07. También hay un ejemplo de aplicación (con ‘classes’) en los ejercicios E18 y E19, que están en el rar_05.

Descargad de nuevo el Dia05 (2009_02_24).rar con material para los próximos martes, pues contiene novedades

• He añadido nuevo ejercicio E15, que es un ejemplo de cómo utilizar clases (programación orientada a objetos), arrays de longitud variable, y el uso de la función map() (en este caso para crear un fondo degradado). 
• Los nuevos ejercicios E16 (a, b y c) siguen ahondando en el tema de las clases y los arrays de tamaño ‘elástico’ (ArrayList), y se aplican criterios de distancia para unir objetos. Son tres variaciones de una misma idea, con posibilidad de ir cambiando interactivamente mediante las flechas del teclado algunos parámetros de control.

Álvaro