Author: Miguel Mesa LAC

En la próxima clase (4 de mayo) estudiaremos la manera de detectar la posición del ratón sobre el sketch, y determinar si está sobre alguna zona en concreto, con lo cual podremos tomar decisiones. Esto sirve por ejemplo para diseñar botones para que el usuario pueda pulsarlos. También ampliaremos conocimientos sobre las classes, creando objetos interactivos que aprovechen las funciones de detección previamente explicadas.

E11 – Ejercicios de detección:

• E11a: detección de zonas en pantalla al pasar el ratón por encima. Un rectángulo, un círculo y un triángulo se colorean de azul si el mouse pasa por encima, y de rojo si además hacemos clic.
• E11b: mismo ejercicio pero con funciones de usuario para simplificar la lectura del código.
• E11c: detección de una zona poligonal con forma cualquiera. Basado en un algoritmo llamado algorimo radial, que es una solución para determinar si un punto está dentro o fuera de un polígono (podéis ampliar información buscando en google).

E12 – Classes con objetos interactivos:

• E12a: Cajas (1) – aparecen diez cajas con posición, tamaño y color aleatorio, que podemos mover con el ratón haciendo clic sobre ellas.
• E12b: Cajas (2) – mismo ejercicio pero depurado: indica mediante un texto qué caja está detectada y qué caja está seleccionada, y además las cajas no se “escapan” si movemos el ratón deprisa. Con el botón derecho reiniciamos el sketch, generando otra nube de cajas aleatorias.

E13 – Ejemplo de aplicación práctica:

• E13: detección de zonas de un mapa. Aquí tenéis una base para ver cómo se capturan datos de varios ficheros y luego se aplican al sketch para generar polígonos y detectarlos. Las coordenadas de los polígonos están en archivos de texto en la carpeta data. Es una aplicación práctica del algoritmo radial y del uso de clases explicados anteriormente.

Es importante para la próxima clase del día 4 de mayo que tengáis los ejercicios en vuestro ordenador y los hayáis probado para ver cómo funcionan. En el aula explicaremos los detalles con la profundidad que nos sea posible.

Nuevos contenidos para el próximo 27 de abril.  Conviene que echéis un vistazo al código y consultéis los correspondientes capítulos del libro Reas&Fry para ir avanzando en los conceptos. En clase recorreremos detalladamente el proceso para realizar estos sketches, explicando las transformaciones y aclarando qué es una class (definición de objeto), para qué sirve y cómo se utiliza. Ahí os dejo los deberes:

E09: Transformaciones (desplazar, rotar, escalar) 
(Los ejercicios van comentados y con referencias bibliográficas al libro de Reas&Fry.)

• E09a: En este sketch una flecha situada en el centro de la pantalla apunta siempre hacia el ratón. La flecha en realidad se dibuja en el punto 0,0 y apuntando hacia el este (eje X positivo), pero justo antes de dibujarla se le aplican unos valores de desplazamiento y giro para conseguir el efecto deseado. Este proceso simplifica mucho el dibujado del objeto.
• E09b: Ahora son tres las flechas que apuntan al ratón. En este caso hemos definido unas funciones de usuario para simplificar el sketch y evitar repetir trozos de código exactamente iguales. También aparecen las funciones pushMatrix y popMatrix, que evitan la acumulación de transformaciones.

E10: Classes – Programación orientada a objetos

• E10a: Una nube de las mismas flechas de los ejemplos anteriores, dispersas por el sketch, se reorientan hacia el ratón al hacer clic en la pantalla. Podemos manejar un número indefinido de flechas, para ello creamos una clase que contiene un grupo de métodos (funciones) y campos (variables) que nos permitirán crear y manejar los objetos. Un objeto es una instancia individual de una clase (pensemos en un bloque con atributos de autocad insertado n veces: la definición del bloque sería la clase, y cada una de las inserciones sería un objeto).
• E10b: Mismo caso que el anterior, pero ahora las flechas están colocadas de forma regular a lo largo de los ejes X,Y del sketch, aunque su rotación inicial es aleatoria. Al hacer clic izquierdo se orientan hacia el ratón, al hacer clic derecho pierden la orientación, y al hacer clic centro se muestra/oculta la rejilla de base.
• E10c: Ampliación del ejercicio E10a. En este ejemplo hemos añadido un par de condicionantes a la clase: además de rotar para mirar al mouse, las flechas cambian de grosor y de color según lo cerca o lejos que estén del ratón.

¡Buen fin de semana!

He reorganizado un poco los ejercicios anteriores; ahora están agrupados, y algunos corregidos y renombrados, así que sería conveniente que borréis lo que teníais descargado antes y volváis a descargar y a descomprimir todos los RAR del sitio ftp.

Ejercicios sobre imágenes, del día 20 de abril:

• E08a: una imagen asociada al cursor se mueve sobre otra imagen fija en el fondo del sketch
• E08b: mismo ejemplo, pero con las flechas UP/DOWN del teclado cambiamos la opacidad de la imagen móvil, y con las flechas LEFT/RIGHT cambiamos la opacidad de la imagen de fondo. Debajo de todo hay una rejilla para poder apreciar bien la opacidad de las imágenes. También hay un texto de instrucciones en la pantalla del sketch.
• E08c: creación de un array de imágenes para realizar una ‘película’ o un ‘pase de diapositivas’ sin fin y automático. Se utiliza la variable de processing ‘frameCount‘ para llevar un control de las imágenes sucesivas, y el operador ‘módulo‘ (%) nos permite recorrer el array cómodamente basándonos en el contador frameCount aunque éste aumente y aumente sin parar.
• E08d: mismo ejemplo, pero el cambio de imágenes lo realiza el usuario haciendo clic con el ratón, o bien avanzando y retrocediendo con las flechas LEFT/RIGHT del teclado.

Están en el ftp los últimos ejercicios, del día 13 de abril.

• El E04, que ya estaba subido, fue convenientemente explicado en clase.
• El E05 dibuja un gradiente de color que varía con el paso del tiempo. En este ejercicio introducimos el uso de la función map(), que nos permite trasladar un valor desde un rango numérico a otro. Aquí tuve un problema que prometí resolver, y la solución es que los incrementos de los contadores r,g,b los había puesto dentro del bucle “for () {…}” , y debían estar fuera, detrás de la última llave. En el ejemplo actual, se mapean las componentes red,blue entre el ancho de la pantalla, y se va variando la componente green, de modo que el degradado evoluciona por la izquierda entre el negro y el verde y por la derecha entre el magenta y el blanco. Observad que las componentes fijas (r,b) están dentro del bucle for, y la componente que evoluciona en el tiempo (g) está después de dicho bucle.
• El E06 dibuja un polígono regular en la posición del mouse haciendo uso de las funciones beginShape-vertex-endShape, que las vimos en clase. También incorpora el cambio de parámetros desde el teclado: mediante las flechas arriba-abajo cambiamos el número de lados, mediante las teclas + y – cambiamos el radio del polígono y mediante las teclas ‘a’ y ‘z’ cambiamos la opacidad.
• Ejercicio E07 sobre arrays, con 5 variaciones. En todos los casos se usan Arrays de ‘floats’ para almacenar las coordenadas (x, y) de un polígono de muchos lados y luego se dibuja el polígono mediante las funciones beginShape-vertex-endShape. Los distintos ejemplos muestran las maneras que existen de declarar, crear y asignar un array. Van comentados y con referencias bibliográficas del libro Reas&Fry para consultar los detalles. Los repasaremos todos en clase.
• El ejercicio E07e, la quinta variación, incluye algunas novedades: se dibuja un polígono de vértices curvos y además incluímos textos en el sketch mediante las funciones PFont, textFont y text, que explicaremos también el próximo día 20 de abril en clase.
• He añadido una sexta variación, la E07f, donde mediante el teclado se pueden mostrar/ocultar las curva, las rectas y los puntos.

Nuevo material en el ftp (para conectar y descargar ver instrucciones en el artículo “Processing_01“, del 24 de marzo).

Repaso:
El ejercicio E01c resuelve la propuesta de refundir el E01a y el E02b de la semana anterior.
Nuevo:
Los ejercicios E02a y E02b son los dos ejemplos que vimos en clase ayer. En ellos se hace uso de la función random() para generar números aleatorios y con ellos decidir la posición, el color, el tamaño y la forma de los objetos que se dibujan. También introducimos el uso del ratón para controlar los eventos, distinguiendo entre botón derecho y botón izquierdo.
El ejercicio E03a usa el ratón para dibujar directamente en el sketch, e incorpora el uso del teclado para cambiar el tamaño del trazo. También disitingue qué botón del ratón se pulsa.
Propuesta de trabajo:
Probad en el ejercicio E03 a introducir colores aleatorios o evolutivos en la función stroke() para ir variando el color del trazo dibujado. Lo resolveremos en la clase siguiente.
Avance para la próxima clase:
El ejercicio E04 (lo vimos brevemente a última hora) os lo pongo por si os da tiempo a echarle un vistazo. Lo explicaremos detalladamente el próximo día 13 de abril.

NOTA IMPORTANTE:
Mañana martes día 30 de marzo hay clase de Processing.
Resolveremos el ejercicio propuesto en el artículo anterior y proseguiremos introduciendo nuevos contenidos.
Álvaro.

Disponibles en ftp los ejemplos de la primera clase y los libros en pdf.
Para descargar ir a la dirección ftp://91.121.98.202 con usuario ceclec2010 y contraseña processing.
Una vez descargados los ejercicios (archivos rar), copiarlos a la carpeta \Mis documentos\Processing y extraer directamente (cada rar lleva dentro una carpeta y dentro de ella el archivo .pde correspondiente).

Explicación de los ejercicios:
Son dos variaciones sobre el mismo caso, y en ambos hay un círculo que se mueve vinculado al ratón. En el ejercicio E01a variamos el diámetro entre dos valores mínimo y máximo. En el E01b lo que variamos es el color del círculo, desde blanco a negro y viceversa.
Propuesta de trabajo:
Combinar los dos ejercicios en uno solo, y conseguir que el círculo cambie a la vez de tamaño y de color.
Observación sobre los libros:
Muy recomendado el Daniel Shiffman, que es como un cursillo, con sus clases organizadas por semanas, con ejercicios etc.
Muy recomendado el de Reas & Fry, libro de consulta por excelencia, que también se puede seguir como un curso pues los contenidos van entremezclados y se va avanzando progresivamente con todo a la vez.
Estupendo el de Visualizing Data, pero para usuarios avanzados.
El de Ira Greenberg no me gusta.
Otras recomendaciones:
Haced uso de la ayuda on-line del programa. Os aclarará instantáneamente muchas dudas acerca de la sintaxis y de los parámetros que han de usar las funciones.

Á.del Valle / 24.03.2010

Hola a todos.
El próximo martes 23 de marzo comenzamos con el apartado del curso dedicado a Processing. Deberíais tener instalado en vuestros ordenadores el software. El 11 de marzo colgaron en su web (http://processing.org) la última versión (1.1). Podéis descargarla de ahí, es un fichero RAR de unos 60 MB.
No tiene instalación, sólo hay que copiar la carpeta que se genera al descomprimir el RAR en algún sitio (p.e. en Archivos de Programa) y luego hacer un acceso directo en el escritorio al fichero processing.exe para crear un icono de arranque.

Un saludo y nos vemos el martes.
Álvaro del Valle