Author: Miguel Mesa LAC

Vamos a recapitular sobre los contenidos desarrollados hasta ahora y a ubicarlos en los distintos capítulos del handbook. Es muy formativo leer tranquilamente estos capítulos y teclear los ejemplos que vienen en ellos. ¡¡No hace falta leérselos todos el mismo día!!

• STRUCTURE
• p.17 / Structure 1: code elements -> elementos más básicos y vocabulario para la escritura de programas
• p.173 / Structure 2: continuous -> ejecución contínua de programas y control de su velocidad
• DATA
• p. 37 / Data 1: variables -> tipos de datos
• p.101 / Data 2: text -> elementos del código para trabajar con el lenguaje
• p.105 / Data 3: conversion, objects -> conversión de tipos y manejo de strings
• p.301 / Data 4: arrays -> arrays de datos
• INPUT
• p.205 / Input 1: mouse -> control de la posición del ratón y su uso
• p. 223 / Input 2: keyboard -> control de las entradas de teclado
• p.229 / Input 3: events -> teclado y ratón para detectar acciones y recibir datos
•  CONTROL
• p.51 / Control 1: decisions -> control del flujo con estructuras condicionales (if)
• p.61 / Control 2: repetition -> control del flujo con estructuras iterativas (for)
• IMAGE
• p.95 / Image 1: display, tint -> carga y muestra de imágenes
• MATHS
• p.43 / Math 1: artithmetic, functions ->operaciones matemáticas básicas y uso de los resultados para controlar la posición y las propiedades de los elementos visuales
• p.127 / Math 4: random -> números aleatorios y su uso para generar formas
• OUTPUT
• p.367 / Output 1: images -> guardar imágenes y secuencias de imágenes mientras el programa está en ejecución
• TYPOGRAPHY
• p.111 / Typography 1: display -> carga y configuración de las fuentes y visualización de las letras en la pantalla

También os recuerdo que la ayuda on-line de cada función es muy aclaratoria en cuanto a la sintaxis a utilizar (argumentos, valores devueltos, etc).

El próximo martes 9 de noviembre contaremos con la presencia de Miguel Mesa con el objetivo de ver aplicaciones de processing a la arquitectura. El resto del tiempo continuaremos con nuevos ejercicios.

Una vez completado el ejercicio de los puntos amarillos comenzamos con el estudio del tratamiento de imágenes en processing.  El ejercicio E05 incluye todo lo que vimos en la sesión 3 (26 de octubre) y lo que terminaremos en la sesión 4 (2 de noviembre). Echad un vistazo al capítulo Image 1: display, tint (pag.95 y sucesivas) del handbook de reas&fry.

También veremos cómo trabajar con tipografías (tipos de letra) en Processing. Adjunto unos ejercicios para que los vayáis mirando, y los desarrollaremos en clase. Para documentación sobre este tema, capítulo Typography 1: display (pág.111 en adelante) del handbook.

Resumen de los ejercicios contenidos en el archivo Sesiones 3 y 4.rar:

• E05 (imágenes): una imagen jpg se utiliza para rellenar el fondo del sketch, el cual se dimensiona en función del tamaño de dicha imagen. Otra imagen png (con fondo transparente) está asociada a la posición del ratón. Podemos cambiar la transparencia de ambas usando el teclado para la de fondo y los botones del mouse para la del ratón. Para apreciar el efecto de la transparencia, en el fondo del sketch dibujamos una retícula sobre fondo blanco.
• E06 (Textos fijos): ejercicio básico donde se ilustra cómo cargar tipos de letra y cómo colocar los textos dentro del sketch con distintas alineaciones, tamaños, etc.
• E07a (Textos móviles 1): los textos aparecen dentro de un cartelito que va asociado a la posición del ratón.
• E07b (Textos móviles 2): variación sobre el anterior; el cartelito aparece al hacer clic con el ratón.
• E08 (Mini Editor): Permite una edición de textos interactiva muy sencilla, con salto de línea y borrado de caracteres.

Un saludo y disculpad por el retraso en publicar el artículo.
Álvaro

Concluídas las dos primeras sesiones del curso ya podéis descargar los manuales y los ejercicios comentados.

Entrad a la direccion ftp ftp://91.121.98.202 con usuario processing y contraseña ceclec. En el directorio raíz irán apareciendo los ejercicios según vaya avanzando el curso, y en el subdirectorio DOC tenéis los libros en PDF que os comenté el primer día: el handbook de reas&fry, el learning processing de daniel shiffman, el visualizing data de fry y  el creative code de ira greenberg (para iniciarse recomiendo los dos primeros y el visualizing data para cuando sepáis un poco más; el cuarto es más farragoso).

En cuanto a los ejercicios, os los iré dejando en formato RAR. Tras la descarga, conviene copiarlos y descomprimirlos en la carpeta Mis documentos/processing para que sean fáciles de abrir desde el programa (el martes que viene explicaré esto bien en clase). Están bastante comentados para ir aclarando los conceptos.
De momento tenéis los cuatro primeros. Si recordáis, el cuarto lo dejamos a medio, aunque aquí os lo he puesto con el desarrollo completo por si queréis ir avanzando materia. Lo terminaremos en clase el martes que viene.

Resumen de los ejercicios:

• E01 (círculo latente): un círculo asociado a la posición del ratón cambia de tamaño creciendo y decreciendo hasta alcanzar unos valores máximo y mínimo.
• E02 (círculo que rebota): un círculo se desplaza en horizontal hacia la derecha y la izquierda rebotando en las paredes del sketch. Se incluye una variación con movimiento también en el eje Y y dejando una estela.
• E03 (círculos aleatorios de colores): se dibujan círculos y rectángulos con posición, tamaño y color aleatorios usando el botón izquierdo del ratón. Los otros botones sirven para repintar la pantalla de blanco o de negro.
• E04 (degradado de puntos amarillos): malla regular de puntos amarillos que va perdiendo densidad conforme avanzamos en el eje Y. Con el ratón cambiamos el diseño y se puede guardar la imagen en formato JPG.

Hasta el próximo martes 26 de octubre (aula 21D, 19:00 horas).

Hola.
El lunes 18 comienza el curso de Processing I – Iniciación.
Es necesario tener el programa  en el ordenador, a ser posible la última versión, la 1.2.1. de julio de 2010.

• Para descargar: ir a http://processing.org y pulsar en el primer enlace (Download Processing). A continuación pulsar el enlace correspondiente a vuestro sistema operativo (linux, mac o windows) y bajar el archivo RAR a vuestra máquina.
• Para instalar: El programa no tiene un proceso de instalación convencional, sólo hay que extraer el contenido del archivo rar (p.e. en la carpeta Archivos de Programa) y luego hacer un acceso directo en el escritorio al fichero processing.exe

Un saludo y hasta el lunes.
Álvaro del Valle

El material del curso estará disponible en el FTP hasta finales de Junio.
A partir del 1 de Julio ya no será accesible.

Rercordad que hay que revisar de vez en cuando la página de descargas de processing por si ha salido una nueva versión. La que hemos usado en el curso es la 1.1, de marzo de 2010.

Un saludo a todos.
Álvaro

Como punto final al curso de Processing se documentan a continuación los contenidos de la última clase.

1. Uso de pseudo-código para resolver problemas de lógica.
Vimos un caso práctico en el que se quería controlar la secuencia en la que se pulsaban dos teclas determinadas y el tiempo que transcurría entre ellas. Las teclas son la ‘a’ y la ‘b’, y hay que medir el tiempo entre a y b o bien entre b y a, pero no entre a-a o b-b.
El ejercicio e15 resuelve el problema, y en la carpeta data tenéis un pdf con el pseudo-código escrito a mano.

2. Uso de librerías suministradas y otras.
Processing se suministra con un paquete de 8 librerías básicas (dxf, javascript, minim, net, opengl, pdf, serial y video). Están documentadas en http://processing.org/reference/libraries. Si seguís avanzando en esa página vereis que hay muchas más, que hay que descargar e instalar (copiar en la carpeta correspondiente): Para que una nueva librería pueda ser utilizada hay que colocarla en la carpeta ‘libraries’ de Processing.
El ejercicio e16 muestra un ejemplo de uso de librerías.

3. Exportar un sketch como aplicación independiente o para colgarlo en la web.
Con la opción ‘Export application’ vimos la posibilidad de generar un fichero .exe para ejecutar un sketch sin necesidad de tener instalado processing. Recordad que hay que distribuir el fichero exe y la carpeta lib que se generan con ese comando.
Con la opción ‘Export’ se crea una carpeta llamada ‘applet’ con una página web (index.html) que podemos subir directamente a nuestro sitio web. Si lo que deseamos es incrustar el sketch de processing en nuestra propia página hay que abrir en modo edición el citado index.htm y copiar todo el código html entre las etiquetas <body> y </body> (excluídas éstas) y pegarlo en el sitio adecuado en nuestra página (que tenemos que estar editando también en modo código).
El ejercicio e17 aporta ejemplos resueltos de todos estos casos.

He añadido en el ftp una carpeta llamada articulos_blog con todos estos textos que he ido escribiendo a lo largo del curso, para que los tengáis a modo de guía o recordatorio de lo que hemos aprendido.

Y recordad que en la página de processing, en el apartado learning, hay muchísimos tutoriales, ejemplos y ejercicios para principiantes y para expertos que podéis investigar para aprender un poco más.

También conviene de vez en cuando revisar el apartado download y actualizar la versión (la que hemos usado en el curso es la 1.1, de marzo de 2010).

Un saludo a todos y gracias por vuestra asistencia.
Álvaro del Valle / 27 de mayo de 2010

En primer lugar agradecer la presentación que hicieron el día 11 los alumnos del curso del año pasado (Jorge+Sergio y Juanma), mostrando la capacidad de processing de utilizar y enviar datos desde y hacia otros programas. Vimos conexiones con un programa de captura de cámara web, con grasshoper+rhino y con arduino. He subido al ftp la documentación que me dieron relacionada con la presentación, en los archivos demo1 (Jorge+Sergio).rar y demo2 (Juanma).rar: para más información podeis escribirles un correo a jgalvanyg@gmail.com (demo1: Jorge+Sergio) y a spooky__26@hotmail.com (demo2: Juanma Sarrió). Juanma ha adjuntado unos documentos de tutorial en formato odt.

En segundo lugar, algunos comentarios sobre moviviento, que fue lo que estuvimos viendo el resto de la sesión:
Ejercicio E14_Motion. Ya están en el ftp los ejercicios vistos en clase y algunos que no vimos. Van comentados, sobre todo los últimos, los que incluían un array de partículas.

• Del e01 al e06 nos dio tiempo a verlos en clase.
• El e07 lo dejamos a medio porque nos sonó la campana. Lo he resuelto de dos maneras, la e07 y la e08. Ambos llevan bastantes notas al final del fichero, intentando explicar el manejo de los arrays.
• El e09 es un ejercicio del libro de Daniel Shiffman, origen de toda esta historia del grifo de partículas, y está resuelto mediante el uso de un ArrayList, que es un tipo de array de tamaño variable que puede guardar ‘objetos’ (classes) y se redimensiona solo. Incluye además un complemento de diseño que no poseen el e07 y el e08: el fondo del sketch es un degradado entre un tono de gris claro y un tono de gris oscuro, en lugar de ser un color homogéneo: queda más bonito.

Y en tercer lugar, un avance para la última clase, el próximo día 18 de mayo.

• Explicaremos qué es una librería y veremos algún ejemplo de uso.
• Explicaremos cómo se puede exportar nuestro trabajo para ejecutarlo en un ordenador que no tenga instalado processing y para ponerlo en la web.
• Veremos un ejemplo de ‘pseudocódigo’ basado en un caso real.

El próximo martes día 11 de mayo la sesión será algo distinta, pues tendremos dos ejemplos prácticos de aplicación de Processing a cargo de alumnos de la escuela que están realizando trabajos con esta herramienta. Sin entrar en detalles, veremos:

• Como se puede utilizar Processing para controlar sucesos externos (cámara de vídeo) y enviar los resultados a otro programa (rhino, vía grashopper) para producir resultados gráficos.
• Cómo se pueden utilizar otros recursos (arduino y hardware específico) para controlar sucesos externos y enviar los resultados a Processing, y producir también resultados gráficos.

Además de eso, que nos ocupará parte de la clase, seguiremos con el desarrollo habitual del curso.