03. Interpolar. Objetivo Interpolar los parámetros de una ilustración; modificar colores en el espacio HSB.

Tamaño: px

Comenzar la demostración a partir de la página:

Download "03. Interpolar. Objetivo Interpolar los parámetros de una ilustración; modificar colores en el espacio HSB."

Alejandro Valverde Ferreyra
hace 6 años
Vistas:

void setup(){ size(600,600); stroke(255); smooth(); mechero(300, 550, 500, color(0)); void mechero(float mx, float my, float mh, color micolor){ float modulo = mh/12; // plastico fill(micolor);

1 03. Interpolar Objetivo Interpolar los parámetros de una ilustración; modificar colores en el espacio HSB. Un Mechero: El siguiente código diseño un mechero bic en función de 4 parámetros: X, Y, altura y color (mx, my, mh y micolor respectivamente). void setup(){ size(600,600); stroke(255); smooth(); mechero(300, 550, 500, color(0)); void mechero(float mx, float my, float mh, color micolor){ float modulo = mh/12; // plastico fill(micolor); nostroke(); rect(mx-(modulo*2.5), my-(modulo*9), modulo*5, modulo*9); // metal fill(225); rect(mx-(modulo*2.5), my-(modulo*12), modulo*2.5, modulo*3); triangle(mx, my-(modulo*12),mx+modulo,my-(modulo*9),mx,my-(modulo*9) ); // gas fill(192,0,0); nostroke(); rect(mx+modulo, my-(modulo*10), modulo*2, modulo/2); rect(mx+modulo, my-(modulo*9)-modulo/2, modulo*3/2, modulo/2); CC some rights reserved - Alfredo Calosci

2 void grid(){ stroke(255,128); for(float n = 0; n< width; n+=(width/36.00)){ line(0,n,width,n); line(n,0,n,height); Interpolando algunos parámetros: Descarga el fichero Integrator.pde ; desde el sistema operativo arrastra el icono del fichero a la ventana de trabajo de Processing. Notarás que ahora tenemos dos pestañas para el código de nuestra aplicación. Una copia del fichero se habrá ubicado en el directorio de la aplicación. Integretor es la librería externa que nos permitirá interpolar valores y crear animaciones y transiciones. Intentaremos interpolar la coordenada X del mechero en función de los clicks del usuario. Añade una línea de código antes de setup(): Integrator mecherox = new Integrator(300); De esta manera estamos creando un objeto de la clase Integrator que se encargará de interpolar valores, su valor inicial es 300 ; Para modificar el target, el valor al que tendrá que llegar nuestro objeto en función del clic del usuario añade: void mousepressed(){ mecherox.target(mousex); en las última líneas del código, fuera de las llaves. Para actualizar el valor de nuestro objeto, desde 300 iniciales hasta el nuevo valor, añade el siguiente código en draw() antes de que la aplicación dibuje los mecheros: mechero(300, 550, 500, color(0)); Para que la aplicación utilice el valor variable de mecherox modifica el código como sigue: mechero(mecherox.value, 550, 500, color(0)); Comprueba el funcionamiento de la aplicación haciendo click en diferentes puntos de la pantalla. Para visualizar mejor el efecto modifica el código de setup() fijando el numero de fotograma por segundos en 36: void setup(){ size(600,600); stroke(255); smooth(); framerate(36); CC some rights reserved - Alfredo Calosci

3 Los elementos básicos para utilizar las interpolaciones que nos ofrece la librería Integrator son: - crear un objeto de la clase Integrator y asignarle un valor inicial - modificar el valor final del objeto por medio de miobjeto.target(nuevovalor) - actualizar el valor del objeto cada fotograma por medio de miobjeto.update() - utilizar el valor variable del objeto en un determinado momento: miobjeto.value De manera análoga, para modificar de manera aleatoria el tamaño del mechero al pulsar la barra espaciadora (spacebar). Añade un segundo objeto variable en las primeras líneas asignándole el valor 500: Integrator mecherox = new Integrator(300); Integrator mecheroh = new Integrator(500); El código que modifica el valor de la altura del mechero al pulsar la barra espaciadora podría ser el siguiente: void keypressed(){ if(key == ' '){ float nuevoh = random(50,500); mecheroh.target(nuevoh); y se interpreta de la siguiente manera: al apretar una de las teclas (del teclado del ordenador) : keypressed() comprueba si: if( ) la tecla apretada: key es igual a un espacio : dos signos de = + ; en tal caso crea un valor aleatorio comprendido entre 50 y 500: random(min, max) y asigna usa ese valor como target hacia el que tiene que variar la altura del mechero: mecheroh.target(nuevotarget) Coloca este nuevo código abajo, al final, después de mousepressed y fuera de las llaves. Para actualizar los valores de altura y usarlos a la hora de dibujar el mechero, modifica draw() como sigue: mechero(mecherox.value, 550, mecheroh.value, color(0)); Añadir Textos Antes de colocar un texto en Processing es necesario crear e importar la tipografía (font) que queremos utilizar. Para crear un tipo de letra en el formato admitido por Processing usa: Tools: Create Font y selecciona un tipo de letra y un tamaño ( Helvetica 48 pt. En el ejemplo). Processing crea un nuevo fichero con extensión.vlw y lo coloca en un directorio data dentro del directorio de la aplicación. Este fichero contendrá las imágenes de cada carácter (glifo) en el tamaño elegido. Processing, a diferencia de otros entornos, no trabaja (de momento) con tipos de letras en formato vectorial. Para utilizar un determinado tipo de letra en Processing son necesarios los siguientes pasos: En primer lugar hay que crear (declarar) un nuevo objeto (PFont) que contendrá la descripción de un deter- CC some rights reserved - Alfredo Calosci

4 minado tipo de letra. En las primeras líneas de código añade: Integrator mecherox = new Integrator(300); Integrator mecheroh = new Integrator(500); PFont mifont; En el paso siguiente cargaremos el tipo de letra que hemos elegido en el objeto mifont : Añade en setup: void setup(){ size(600,600); stroke(255); smooth(); framerate(36); mifont = loadfont("helveticaneue-14.vlw"); Para añadir un texto al pié de la aplicación añadiremos en draw(): mechero(mecherox.value, 550, mecheroh.value, color(0)); // escribe el texto fill(0); textfont(mifont, 14); text("press the mouse / spacebar", 30,height-20); donde fill() define el color del texto, textfont(nombre_del_tipo_de_letra, tamaño) define el tipo que usaremos para escribir y text( aquí va mi texto,x,y) define que y donde escribimos. Para centrar el texto en el medio modifica: mechero(mecherox.value, 550, mecheroh.value, color(0)); // escribe el texto fill(0); textfont(mifont, 14); textalign(center,baseline); text("press the mouse / spacebar", width/2,height-20); Modificar colores en el espacio HSB Processing utiliza como espacio de color por defecto el espacio RGB (primarios aditivos). En algunas ocasiones puede ser útil aprender a modificar colores en el espacio HSB (Tinte H, Saturación S y Brillo/Luminosidad B En este ejemplo intentaremos modificar el tinte del mechero en función de la X del ratón. Los valores de tinte (H) varían entre 0 y 360 (grados) en un recorrido que empieza y vuelve al Rojo pasando por los otros primarios aditivos (verde: 120, azul: 240) intercalados con los primarios sustractivos (amarillo: 60, cyan: 180, magenta: 300). CC some rights reserved - Alfredo Calosci

5 Para trabajar en modo HSB modifica el código de la siguiente manera: // modificar colores colormode(hsb,360,100,100); int mih = 0; int mis = 100; int mib = 80; mechero(mecherox.value, 550, mecheroh.value, color(mih, mis, mib)); mechero(50, 550, 100, color(240, mis, mib)); // vuelve a RGB colormode(rgb,255,255,255); // escribe el texto fill(0); textfont(mifont, 14); textalign(center,baseline); text("press the mouse / spacebar", width/2,height-20); el primer colormode() cambia el modo de color a HSB, sus 3 parametros son los valores máximos de H,S y B respectivamente (normalmente 360,100,100). El segundo colormode() vuelve a la situación por defecto, espacio RGB a 8 bits (256 valores entre 0 y 255). Las variables mih, mis y mib son los parámetros que utilizaremos para jugar a modificar colores en el espacio HSB. Para modificar el tinte (H) en función de la coordenada X del ratón (mousex) tendremos que aplicar una sencilla regla de tres. La coordenada X del ratón variará entre 0 y el ancho de la aplicación (width) mientras que el tinte (H) tendrá que hacerlo entre 0 y 360. La función map(valore, min, max, minresultado, maxresultado) nos ayudará a resolver la ecuación en una sola línea de código: En draw() remplaza: int mih = 0; Por: float mih = map(mousex,0,width,0,360); Si quieres que el tono de color varíe en función de la coordenada X del mechero en lugar de la X del ratón tendrá que modificar como sigue: float mih = map(mecherox.value,0,width,0,360); Escala cromática de referencia: Para visualizar en el eje X las variaciones de tinte crea una nueva función: void escala(){ colormode(hsb,360,100,100); for(float n = 0; n< width; n+=(width/36)){ fill(map(n,0,width,0,360),90,80); rect(n,0,width/36,5); // vuelve a RGB colormode(rgb,255,255,255); y añade al final de draw(): escala(); CC some rights reserved - Alfredo Calosci

6 Bibliografía: Ben Fry, Visualizing Data O Reilly, Cambridge 2007 Referencias: CC some rights reserved - Alfredo Calosci

Documentos relacionados

Programar con Processing en Python

Programar con Processing en Python J.B. Hayet CENTRO DE INVESTIGACIÓN EN MATEMÁTICAS Julio 2015 J.B. Hayet Processing-Python Mode Julio 2015 1 / 20 El lenguaje Processing Processing: Un dialecto de Java