tutorial de programación para arte interactivo
Emiliano Causa
e_causa@yahoo.com.ar
www.emiliano-causa.com.ar
www.biopus.com.ar
Christian Silva
entorno3@gmail.com
www.hipertextos.com.ar
Leonardo Garay
todotresde@gmail.com
David Bedoian
bedoiandavid@yahoo.com
www.bedoiandavid.com.ar
tutorial de programación para arte interactivo

Estructuras de control iterativas (repetitivas) (parte III)

zip descargar

Más ejemplos

En los siguientes ejemplos se utilizan ciclos for-next para realizar degradé pintando pixel x pixel. Para eso utiliza una instrucción especial de Processing llamada set( ), que permite establecer el color de un pixel determinado. La instrcción set( ), tiene los siguientes parámetros:

set( x , y , color );

size(200,200);
color c = color( 255 , 0 , 0 );
set( 10 , 20 , c );

Hecho en Processing

Los dos primeros parámetros son la posición horizontal y vertical del pixel (x e y) y el tercer parámetro es un color. El color se establece con un tipo de dato color que posee Processing. Una variable de tipo color se declara con la palabra homónima y para asignarle valores es necesario usar la función, también, color( ), que posee tres parámetros, uno para cada componente color de la paleta RGB (colores primarios de la luz o paleta aditiva del color):

color c;
c = color( red , green , blue );

Hecho en Processing

Los valores de cada canal (red, green y blue, que son rojo, verde y azul respectivamente) pueden adoptar valores entre 0 y 255. Así, en el ejemplo que sigue se puede ver que conforme la variable i aumenta de 0 a 255 (debido al ciclo for-next), el color rojo aumenta debido a la instrucción que define el color de los pixeles ( "color c = color(i,0,0)" ), en donde i está puesta en el lugar de la componente roja:

To view this content, you need to install Java from java.com

size(255,255);

for(int i=0 ; i<=255 ; i++){

for(int j=0 ; j<=255 ; j++){

color c = color(i,0,0);
set(i,j,c);

}

}

Hecho en Processing

El que sigue es un ejemplo interactivo del anterior sólo que fue variado para que el nivel de verde aumentara horizontalmente, el nivel de azul, verticalmente, y el valor de rojo en función de la posición horizontal del mouse. Haga click en "código fuente" para acceder al mismo:

 

código fuente

Hecho en Processing

Otro ejemplo, pero en este el fondo y las figuras tienen distintos degradé que responden al mouse:

 

código fuente

Hecho en Processing

Por último, el ejemplo que sigue aprovecha este recurso expresivo, de variar en forma independiente los degradé de las figuras y los fondos, para hacer un modesto homenaje a un gran artista que se llamó Victor Vasarely (ver este tema en Wikipedia):

código fuente

Hecho en Processing

ir arriba