Month: abril 2010

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.