Instrucciones de dibujo en 2D con Processing Píxel | línea recta | triángulo | círculo/elipse | cuadrado/rectángulo | curva bezier | arco
Píxelset() Modo de Uso set (x,y,c); Parámetros X x del pixel Y y del pixel C Color. Si se usa un valor entero, se interpreta como valor de gris. Ejemplo código size(150,150); //define el tamaño de ventana background(0); //pinta la ventana de negro set(75,75,255); //dibuja un pixel blanco
Línea Rectaline() Rectaline() Modo de Uso line (x1,y1,x2,y2); Parámetros x1 x de un extremo y1 y de un extremo x2 x del otro extremo y2 y del otro extremo Ejemplo código size(150,150); //define el tamaño de ventana background(255); //pinta el fondo de blanco strokeWeight(4); //ancho de la linea (4 pixeles) line(10,20,130,140);
Triángulotriangle() Modo de Uso triangle(x1,y1,x2, triangle(x1,y1,x2,y2,x3,y3); y2,x3,y3); Parámetros x1 x del primer vértice y1 y del primer vértice x2 x del segundo vértice y2 y del segundo vértice x3 x del tercer vértice y3 y del tercer vértice Ejemplo código size(150,150); //define el tamaño de ventana background(255); //pinta el fondo de blanco strokeWeight(4); //ancho de la linea (4 pixeles) triangle(10,110,80,20,130,130);
Círculo / Elipseellipse() Modo de uso ellipse(x1,y1,x1,y2); Parámetros El uso de los parametros depende de ellipseMode(); ellipseMode(CENTER); (valor por defecto) x1 x del centro y1 y del centro centro x2 ancho (diámetro) y2 alto (diámetro)
ellipseMode(CO ellipseMode(CORNER); RNER); x1 x del vértice superior izquierdo del rectángulo que la contiene y1 y del vértice superior izquierdo del rectángulo que la contiene x2 ancho (diámetro) y2 alto (diámetro) ellipseMode(CORNERS); x1 x de un vértice del rectángulo que la contiene y1 y de un vértice del rectángulo que la contiene x2 x del vértice opuesto del rectángulo que la contiene y2 y del vértice opuesto del rectángulo que la contiene Ejemplo código size(150,150); //define el tamaño de ventana background(255); //pinta el fondo de blanco strokeWeight(4); //ancho de la linea (4 pixeles) rectMode(CENTER); //(valor por defecto) ellipse(70,80,130,80);
Cuadrado / Rectángulorectangle() Modo de uso rect(x1,y1,x rect(x1,y1,x1,y2); 1,y2); Parámetros El uso de los parametros depende de rectMode(); rectMode(CENTER); x1 x del centro y1 y del centro x2 ancho y2 alto rectMode(CORNER); (valor por defecto) x1 x del vértice superior izquierdo y1 y del vértice superior izquierdo x2 ancho y2 alto rectMode(CORNERS); x1 x de un vértice y1 y de un vértice x2 x del vértice opuesto y2 y del vértice opuesto Ejemplo código size(150,150); //define el tamaño de ventana background(255); //pinta el fondo de blanco strokeWeight(4); //ancho de la linea (4 pixeles) rectMode(CORNER); //modo en que se interpretarán los parámetros en rect() rect(10,10,120,80);
Cuadriláteroquad() Modo de Uso quad(x1,y1,x quad(x1,y1,x2,y2,x3,y3,x4,y4); 2,y2,x3,y3,x4,y4); Parámetros x1 x del primer vértice y1 y del primer vértice x2 x del segundo vértice y2 y del segundo vértice x3 x del tercer vértice y3 y del tercer vértice x4 x del cuarto vértice y4 y del cuarto vértice Ejemplo código
size(150,150); //define el tamaño de ventana background(255); //pinta la ventana de blanco strokeWeight(4); //ancho de la linea (4 pixeles) quad(20,10,130,30,110,115,40,140);
Curvabezier() Modo de Uso bezier(x1,y1,x2,y2,x3,y3,x4,y4); Parámetros x1 x de un extremo y1 y de un extremo x2 x del punto de dirección de salida y2 y del punto de dirección de salida x3 x de la dirección de llegada y3 y de la dirección de llegada x4 x del otro extremo y4 y del otro extremo Ejemplo código size(150,150); //define el tamaño de ventana background(2 background(255); 55); //pinta la ventana de blanco strokeWeight(4); //ancho de la linea (4 pixeles) bezier(20,10,40,140,120,30,110,115);
Arcoarc() Esta función es similar a ellipse, con dos párametro más para indicar el inicio y el final del arco que se representará. Modo de uso arc(x1,y1 arc(x1,y1,x1,y2,rad1,rad2); ,x1,y2,rad1,rad2); Parámetros El uso de los primeros cuatro parámetros depende de ellipseMode(); En este caso se explican los parámetro con ellipseMode(CENTER); que es el valor por defecto. ver ellipse(); x1 x del centro y1 x2
y del centro ancho (diámetro)
y2 alto (diámetro) rad1 punto de inicio rad2 punto de final Ejemplo código size(150,150); //define el tamaño de ventana background(2 background(255); 55); //pinta la ventana con colore de fondo blanco strokeWeight(4); //ancho de la linea (4 pixeles) ellipseMode(CENTER); //modo de los parámetros en ellipse() y arc(); arc(80,70,120,80,PI/2,0);
Tipos de datos y operaciones Introducción La programación trata acerca de la cosbtrucción de algoritmos (conjunto de instrucciones que la computadora deberá seguir), durante el desarrollo de dichos algoritmos es necesario establecer algunos datos. Los datos sirven generalmente como parámetros que establecen el grado y forma con el que se ejecutan ciertas instrucciones. Para dar un ejemplo, en el siguiente algoritmo:
size(150,150); //define el tamaño de ventana background(0); //pinta la ventana de negro set(75,75,255); //dibuja un pixel blanco
todos los números que aparecen (como el 150 en la instrucción size) son datos. En este casos todos los datos que aparecen son constantes , es decir que no cambian su valor durante el transcurso del algoritmo, pero también es posible establecer datos variables . Los textos que aparecen en cada línea después de la doble barra (//) son comentarios , sirven para que el programador puedo escribir notas para guiarse sin que el compilador las tome como instrucciones,es decir que no son instrucciones ejecutables y el programa las desestima como tales.
Las Variables Las variables son espacios de memoria que permiten almacenar datos e ir variando sus valores durante el transcurso de un programa. Una variables variab les deber ser declarada para poder pode r ser utilizada, luego lueg o se le puedo asignar asign ar un valor y ser utilizada:
int miVar; //declara una variable numérica llamada "miVar" miVar = 23; //le asigna el valor 23 a la variable miVar println(miVar); //imprime el valor almacenado en miVar. En el ejemplo anterior, en la primer línea se declaró una variable (es decir un espacio de memoria RAM) llamada "miVar", en la segunda línea se le asignó el valor numérico 23, y en la tercer línea la instrucción println nos permite ver el valor almacenado actualmente en la variable miVar. La instrucción println imprime el valor de variable, así como el resultado de operaciones, en el área negra de la interface de processing.
Tipos de datos Los datos que se pueden guardar en variables pueden ser de diferentes tipos, estos tipos responden a la naturaleza de información que pueden guardar y operar. Por ejemplo, los dostipos de datos prinicipales son los numérico y los alfanuméricos . Los primeros, como su nombre lo indica, almacenan valores numéricos, lo que permite realizar operaciones matemáticas con ellos, mientras los alfanumércos almacenan y operan caracteres, es decir letras y otros signos que sirvan para escribir.
Datos numéricos Dentro de los tipos numéricos exiten dos tipos principales: los enteros y los reales (con decimales). Los enteros invluyen a los números naturales (que sirven para contar cosas: 1,2,3,...) a los negativos (-1,-2,-3,...) y al cero. Mientras que los reales incluyen a los enteros pero también a los números fraccionarios, racionales e irracionales (como la raiz cuadrada de dos o el número Pi), es decir todo lo que puede ser representado con decimales (0.14 , 15.67 , -6.8998762 ,etc.). Los enteros se declaran con la palabara int, que viene del término ingles integer. Mientras que los reales se declaran con la palabra float, este término viene de la denominación inglesa de "coma flotante" qué es como se llamaba a estos números. Así, en el ejemplo que sigue, la primer línea declara una variable llamada "miVar" de tipo entero, la segunda declara una variable de tipo real llamada "otraVar", la tercer línea declara 3 variables "a","b" y "c" de tipo entero, y la última línea dos vriables (d y e) de tipo real.
int miVar; float otraVar; int a,b,c; float d,e; Cada tipo de dato define las operaciones que se pueden realizar con dichas variables. Por ejemplo, las variables enteras permiten las 4 operaciones aritméticas básicas: +,-,*,/ (es decir: suma, resta, multiplicación y división, respectivamente). Si bien la variables de tipo real tambien permite las cuatros operaciones básicas, una de la diferencias principales es que la división es diferente. Por ejemplo, la división con datos enteros devuelve valores enteros, mientras que la división real devuelve un resultado con decimales.
int a,b,e; float c,d,f; a = 10; b = 3; c = 40.0; d = 6.0; println( a / b ); //imprime 3 println( c / d ); //imprime 6.66666666... e = a + b * 8; f = c - d * 2.0;
En este ejemplo, la división entre las variables a y b devuelve como resultado un 3 (en vez de 3.3333... que sería el resultado más preciso), mientras que la división entre c y d devuelve 6.6666666.... . En las dos últimas líneas se puede ver también que es posible operar variables entre sì y asignar el resultado de dicha operación a otra variable. El ejemplo que sigue muestra algunas formas abreviadas de escribir ciertas operaciones, como en el caso de a=a+1 que pueden ser escrito como a++:
int x,b; x = 100; b = 5; x++; // esto equivale a x=x+1 x--; // esto equivale a x=x-1 x+=b; // esto equivale a x=x+b x-=b; // esto equivale a x=x-b x*=b; // esto equivale a x=x*b x/=b; // esto equivale a x=x/b
Datos alfanuméricos Los datos alfanuméricos permiten trabajar con caracteres y cadenas de caracteres (secuencias de caracteres). Los caracteres que la computadora puede utilizar pertenecen al código ASCII (ver (ver el tema en Wikipedia). Wikipedia). Los dos tipos de datos alfanuméricos que se pueden usar son el tipo caracter y el tipo cadena de caracteres, la diferencia entre estos dos tipos es que el primero sólo puede almacenar un caractere mientras que el segundo puede almacenar secuencias y por ende palabras oraciones y cualquier otro tipo de secuencia . Los caracteres se declaran con la palabra char y sus valores constantes se encierran con comillas simples:
char miVar; miVar = 'b'; println(miVar); imprime una b Las cadenas de caracteres se declaran con la palabra String y sus valores constantes se encierran entre comillas dobles. La función de las comillas en ambos casos es de distinguir los valores alfanuméricos del resto del texto del algoritmo. En el ejemplo que sigue se puede ver también la única operación que permiten los tipos alfanuméricos, la concatenación, que se representa con el signo (+). En la cuarta línea se puede ver como se le asigna a la variable c la concatenación de la variable a y la variable b, es decir el valos de la variable a ("hola ") y el valor de la variable b ("mundo!!!!"), lo que sería "hola "+"mundo!!!!":
String a,b,c; a = "hola "; b = "mundo!!!!"; c = a + b; println(a); imprime hola println(c); imprime hola mundo!!!!
Otros tipos de datos Además de los tipos de datos numéricos y alfanuméricos, existen otros tipos. Uno de estos, son los datos de tipo lógico, que permiten operar y almacenar valores de verdad lógica. Los datos lógicos pueden adquirir dos valores: verdadero y falso,, que en ingles se escriben: true y false. Estos tipos de datos los veremos más adelante. Dependiendo del Lenguaje de programación que se trate, veremos que pueden existir muchos más tipos de datos primitivos. Por ejemplo en Processing existe el tipo de dato para tratar colores, llamado color.
Interactividad básica Los modos estático y dinámico Los siguientes ejemplos muestran como trabajar con interactividad en Processing. Este lenguaje permite trabajar e dos modos de programación, uno estático y otro dinámico. En el primer modo se escriben las instrucciones en orden descendente pero sin una organización externa, mientras que en el segundo modo de programación el código se organiza en estructuras. Las dos estructuras principales con setup() y draw() (que en versiones anteriores de Processing se llamaba loop() ). En el ejemplo que sigue, las instrucciones que se detallan se ejecutan de arriba a abajo, y el código se ejecuta una única vez, lo que hace que el algoritmo sirva para generar una ùnica imagen estática:
int a; a = 10; size(150,150); background(100); a = (a+1) % 150; rect(a,50,10,10); A diferencia de el anterior ejempo, en el siguiente, las instrucciones mismas instrucciones estan organizadas dentro de la estructura void setup(){ ... } y la estructura void draw(){ ... } . Las instrucciones que se encuentran en el setup() sólo se ejecutan una única vez al inicio del programa. Las instrucciones que se encuentran en el draw() se ejecutan 30 veces por segundo luego de la ejecución del setup(). Fuera de estas dos estructuras se pueden escribir declaraciones de variables u otras estructuras que luego veremos.
int a; void setup(){ a = 10; size(150,150); } void draw(){ background(100); a = (a+1) % 150; rect(a,50,10,10); }
El uso del mouse Para detectar la posición del mouse en la pantalla existen dos variables del sistema llamadas mouseX y mouseY. Estas variables representan la posición horizontal y vertical del mouse, respectivamente. No es necesario declarar estas variables dado que ya pertenecen al sistema. Con el simple hecho de referenciarlas, estas devuelven en cada momento los valores numéricos que expresan la posición del mouse. En los ejemplos siguientes se usan estas variables para dibujar un rectángulo en la posición del mouse:
Ejemplo: Siguiendo el mouse (dejando rastro)
int x,y; void setup(){ background(230); //la diferencia esta en esta linea size(200,200); } void draw(){ x=mouseX-25; y=mouseY-25; rect(x,y,50,50); } Ejemplo: Siguiendo el mouse (sin rastro)
int x,y; void setup(){ size(200,200); } void draw(){ background(230); //la diferencia esta en esta linea x=mouseX-25; y=mouseY-25; rect(x,y,50,50); }
Otros ejemplos Ejemplo: Redimensionando el rectángulo con el mouse int x,y; void setup(){ size(200,200); rectMode(CORNER); } void draw(){ background(230); x=mouseX-100; y=mouseY-100; rect(100,100,x,y); }
Ejemplo: Movimiento inverso int x,y; void setup(){ size(200,200); //rectMode(CORNER); } void draw(){ background(230); x=200-mouseX-25; y=200-mouseY-25; rect(x,y,50,50); }
Ejemplo: Seguimientos y movimientos inverso int x,y,x1,y1; void setup(){ size(200,200); noFill(); } void draw(){ background(230); x=200-mouseX-25; y=200-mouseY-25; x1=mouseX-25; y1=mouseY-25; rect(x,25,50,50); rect(x1,125,50,50); rect(25,y,50,50); rect(125,y1,50,50); }
Ejemplo: Multiplicación int x,x2,x3,x4,x5,x6; void setup(){ size(600,200); noFill(); } void draw(){ background(230); x=mouseX; x2=x*2; x3=x*3; x4=x*4; x5=x*5; x6=x*6; line(x,0,x,200); line(x2,0,x2,200); line(x3,0,x3,200); line(x4,0,x4,200); line(x5,0,x5,200); line(x6,0,x6,200); }
Ejemplo: División int x,x2,x3,x4,x5,x6; void setup(){ size(600,200); noFill();
} void draw(){ background(230); x=mouseX; x2=x/2; x3=x2/2; x4=x3/2; x5=x4/2; x6=x5/2; line(x,0,x,200); line(x2,0,x2,200); line(x3,0,x3,200); line(x4,0,x4,200); line(x5,0,x5,200); line(x6,0,x6,200); }
Ejemplo: Controlando colores con el mouse int x,y,xc,yc; void setup(){ size(255,255); noStroke(); } void draw(){ x=mouseX; y=mouseY; xc=255-x; yc=255-y; fill(x,y,0); rect(0,0,255,255); fill(xc,yc,255); rect(50,50,155,155);
}
Estructuras de control condicionales Estructuras de control Los ejemplos de los anteriores apartados siguen una línea única de ejecución, es decir, no tienen posibilidad de bifurcar su línea de ejecución, ni de repetir ninguna porción de su código. Para poder dirigir, controlar, la forma en que se ejecuta el algoritmo, es decir, para controlar su flujo de ejecución, existen dos tipos principales de estructuras: las estructuras condicionales y las estructuras iterativas (repetitivas). Entendemos por estructura a un tipo de demarcación del código que nos permite organizarlo de alguna forma. En el ejemplo que sigue se ve una estructura condicional que bifurca el código en dos líneas de ejecución: ... void draw(){ if(mouseX>200){ //comienzo estructura background(255); //primera línea de ejecución }else{ //separación entre las líneas background(0); //segunda línea de ejecución } //fin de la estructura }
Las estructuras condicionales Las estructuras condicionales permiten bifurcar un algoritmo en función de una condición. Existen diferentes tipos de estructuras condicionales, una de las primeras que veremos es la estructura if-then que se traduce como si-entonces , lo que quiere decir es "si tal cosa entonces hacer tal otra": if( condición ){ cuerpo de la estructura }
La estructura if-then permite encerrar una porción de código entre sus dos llaves ( { } ) . Esa porción de código se ejecuta sólo si se cumple la condición que se encuentra entre los paréntesis:
void setup(){ size(200,200); } void draw(){ background( 0 ); fill(255); if( mouseX > 100 ){ rect( 50 , 50 , 100 , 100 ); } fill(255,0,0,150); rect(100,0,100,200); }
En el ejemplo de arriba, la instrucción "rect(..." , sólo se ejecuta cuando se cumple la condición "mouseX>200" , es decir, se dibuja un rectángulo en la pantalla sólo cuando el mouse está más a la derecha de los 100 píxeles. El segundo rectángulo marca la zona en que la posición horizontal del mouse supera el valor de 100. A continuación se puede ver un diagrama de flujo que muestra en qué orden se van ejecutando las instrucciones y bajo qué condiciones: Como muestra el diagrama de arriba el orden en que se ejecutan las instrucciones es: 1ero, se pinta el fondo de negro 2do, se define el color de relleno en blanco, se pregunta 3ero, se evalua si el mouse supera la posición horizontal 100 4to, sólo si la condición se cumple se dibuja el cuadrado del centro de color blanco 5to, se define el color de relleno como rojo con un poco de transparencia 6to, se dibuja un rectángulo del color rojo que muestra el área activa
La Condición En este punto es preciso ver qué es una condición. Se considera condición a cualquier variable, constante u operación que devuelva un valor lógico. Los valores lógicos sólo pueden adoptar dos estados: verdadero o falso. En inglés los los valores lógicos verdadero o falso, se escriben true o false respectivamente. Es decir, true o false son las dos únicas constantes lógicas que existen. Una estructura if-then se ejecuta si la condición devuelve un valor true. En el ejemplo anterior la condición era una operación de comparación ( mouseX > 100 ), las comparaciones dan como resultado un valor de verdad, como muestra el siguiente ejemplo:
int a = 10; println( a > 5 ); //esta operación devuelve el valor true println( a > 15 ); //esta operación devuelve el valor false
Los comparativos comparativos Los operadores comparativos son los siguientes:
println( println( println( println( println( println(
3 2 2 3 2 3
> 2 ); // esto significa 3 es mayor que 2 < 3 ); // esto significa 2 es menor que 3 == 2 ); // esto significa 2 es igual a 2 >= 2 ); // esto significa 3 es mayor o igual que 2 <= 3 ); // esto significa 2 es menor o igual que 3 != 2 ); // esto significa 3 es distinto a 2
En el ejemplo anterior todas las líneas devuelven true. Hay que señalar que el signo de "igual a" se escribe con un doble signo (=), no hay que confundir el (==), que es una comparación, con el (=), que es una asignación. En los casos del mayor o igual (>=), la operación devuelve true tanto en los casos en que el primer valor es mayor al segundo, así como cuando el valor es igual al segundo, es decir que 3>=2 devuelve true y 2==2 también devuelve true. El mismo caso se dá con el signo menor o igual.
La estructura if-then-else La estructura if-then, permite ejecutar u omitir una porción de c ódigo en función de una condición. A veces es necesario bifurcar el código en vez de omitirlo. La estructura if-then-else , que se traduciría como si-entonces-sino, quiere decir "si tal cosa entonces hacer tal cosa sino hacer tal otra":
if( condición condición ){ se ejecuta si la condición es verdadera }else{ se ejecuta si la condición es falsa } En el ejemplo que sigue, que es una variación del primer ejemplo, se puede ver como se bifurca el algoritmo a partir de la condición. Si la condición ( mouseX > 100 ) se cumple, entonces se dibuja el cuadrado, sino se dibuja el círculo:
void setup(){ size(200,200); } void draw(){ background( 0 ); fill(255); if( mouseX > 100 ){ rect( 50 , 50 , 100 , 100 ); }else{ ellipse( 100 , 100 , 100 , 100 ); } fill(255,0,0,150); rect(100,0,100,200); }
La estructura if-then-else if-else La estructura if-then-else_if-else , permite evaluar varias condiciones para tomar diferentes caminos en función de cada una y por último tomar un camino si no se ha cumplido ninguna de estas:
if( condición 1 ){ se ejecuta si la condición 1 es verdadera }else if( condición 2 ){ se ejecuta si la condición 1 es falsa y la 2 es verdadera }else if( condición 3 ){ se ejecuta si la condición 1 y 2 son falsas y la 3 es verdadera ... }else{ se ejecuta si todas las condiciones anteriores son falsas } En el ejemplo que sigue, que es una nueva variación del primer ejemplo, se puede ver como se bifurca dos veces el algoritmo a partir de dos condiciones:
void setup(){ size(200,200); } void draw(){ background( 0 ); fill(255); if( mouseX > 100 ){ rect( 50 , 50 , 100 , 100 ); }else if( mouseX > 50 ){ ellipse( 100 , 100 , 100 , 100 ); }else{ triangle(50,150,100,50,150,150); } fill(255,0,0,70); rect(100,0,100,200); rect(50,0,150,200); }
Las variables booleanas Así como existen los valores de verdad true y false, valores lógicos o booleanos (en honor a George Boole ver el tema en Wikipedia), Wikipedia), también existen variables de tipo lógico. Estas variables se declaran con la palabra boolean y sólo pueden adquirir valores booleanos: true o false. Debido a que las comparaciones devuelven valores booleanos, se puede asignar a una variable booleana el resultado de una comparación:
boolean a,b; int c = 10; int d = 20;
a = true; b = c > d; println( a ); //imprime true println( b ); //imprime false En los ejemplos anteriores se podría reemplazar, en la condición, la operación de comparación por una variable booleana: ... boolean a; a = mouseX > 100; if( a ){ … En este caso no es muy útil, pero existen casos en que se hace necesario cambiar la condición en forma dinámica.
Las operaciones booleanas Así como cada tipo de dato permite realizar ciertas operaciones, los datos booleanos pueden ser operados por tres operadores llamados: and (que se escribe && ), or (que se escribe || ) y not (que se escribe ! ). Estos operadores sirven para combinar más de un valor de verdad y obtener uno solo como resultado:
println( println( println( println(
true && true ); //imprime true true && false); //imprime false false && true ); //imprime false false && false); //imprime false
println( println( println( println(
true || true ); //imprime true true || false); //imprime true false || true ); //imprime true false || false); //imprime false
println( ! true ); //imprime false println( ! false ); //imprime true Como muestra el ejemplo anterior, el operador and (&&) devuelve un valor true sólo cuando los dos operadores son true, caso contrario devuelve false. El operador or (||) devuelve un valor false sólo cuando ambos operadores son false, caso contrario devuelve true. Y el operador not (!) invierte el valor de verdad de true a false y viceversa. Estos operadores sirven para evaluar varias comparaciones en una sola condición, como muestra el ejemplo siguiente, en donde las condición es cierta cuando se cumplen las dos comparaciones a la vez: cuando mouseX>100 y mouseY>100:
void setup(){ size(200,200); } void draw(){ background( 0 ); fill(255); if( mouseX > 100 && mouseY > 100){ //solo se cumple //cuando las dos condiciones son ciertas rect( 50 , 50 , 100 , 100 ); } fill(255,0,0,150); rect(100,100,100,100); } El ejemplo que sigue muestra como se usa el operador or para unir condiciones que no se superponen, dado que alcanza que se de una para ser verdadera:
void setup(){ size(200,200); } void draw(){ background( 0 ); fill(255); if( mouseX > 160 || mouseX < 40){ //basta que una de las // dos condiciones sea cierta para cumplirse rect( 50 , 50 , 100 , 100 ); } fill(255,0,0,150); rect(160,0,40,200); rect(0,0,40,200); }
El ejemplo que sigue muestra como el operador not invierte la condición, haciendo que se cumpla cuando mouseX NO es mayor a 100:
void setup(){ size(200,200); } void draw(){ background( 0 ); fill(255); if( !(mouseX > 100) ){ //se cumple si NO es mayor a 100 rect( 50 , 50 , 100 , 100 ); } fill(255,0,0,150); rect(0,0,100,200); }
Estructuras de control condicionales (parte II) Incrementos cíclicos Hasta aquí hemos visto las estructuras condicionales, ahora veremos una aplicación de estas estructuras a un problema de incremento con restricciones. Supongamos que tenemos un ejemplo como el que sigue en donde incrementamos una variable para desplazar un objeto en la pantalla: (si el objeto ya salio de pantalla haga click sobre el ejemplo para que vuelva a empezar)
int x; void setup(){ size(200,200); smooth(); x = 10; } void draw(){ background(0,0,50); ellipse(x,100,20,20); x++; println(x); } void mousePressed(){ x = 10; } En el ejemplo anterior hemos empleado una estructura void mousePressed(), esta estructura es como setup() o draw() , con la única diferencia de que esta estructura se ejecuta cuando hacemos click con el mouse. Este ejemplo establece el valor inicial de la variable x en 10, luego en cada fotograma que se ejecuta la estructura draw() la variable x se incrementa en 1. Esto sucede hasta que se termine el programa o el usuario haga click. Es fácil ver que con un algoritmo como este, el valor de x se incrementará hasta el infinito (o por lo menos hasta valores muy grandes en función de la presición del lenguaje de prorgramación), pero en principio esto es un problema dado que si bien queremos que el objeto se desplace no queremos que se vaya de pantalla. La forma de resolver este problema es usando un if-then que nos permita "condicionar" el incremento:
int x; void setup(){ size(200,200); smooth(); x = 10; } void draw(){ background(0,0,50); ellipse(x,100,20,20); x++; if( x > width ){ //agregamos esta línea para condicionar el //incremento x = 0; } } Como se puede ver en este ejemplo, el "if( x > width )" evalúa si la variable x tiene una valor mayor al ancho de la pantalla (determinado por la variable del sistema llamada width), y si esto es cierto entonces le asigna a x un cero, el equivalente a enviar al objeto al extremo izquierdo de la pantalla. Cabe aclarar que en este ejemplo hubiera sido lo mismo poner "if( x > 200 )" dado que ese es el ancho de la pantalla, pero al usar la variable width nos aseguramos de
que si cambiamos el ancho en algún momento con la instrucción size() entonces no estaremos obligados a buscar los valores del ancho por todo el programa dado que width se acomoda automáticamente. El ejemplo que sigue es análogo al anterior sólo que el objeto va de derecha a izquierda y por ende cambia la "condición de borde", teniendo que evaluar si x es menor a cero, y en caso de ser cierto le asigna el valor width, el equivalente a trasladar al objeto al borde derecho:
int x; void setup(){ size(200,200); smooth(); x = 100; } void draw(){ background(0,0,50); ellipse(x,100,20,20); x--; if( x < 0){ x = width; } }
Incremento ida y vuelta Supongamos ahora que desamos hacer que el objeto vaya ida y vuelta de un extremo al otro. Entonces no encontramos con el problema de que la condición de borde depende de en qué dirección estamos llendo, pero no sólo eso, sino que el incremento también depende de la dirección en la que se está moviendo. En el ejemplo que sigue, pusimos una variable que se encarga de señalar la dirección hacia la que nos dirigimos. El círculo comienza en el centro y se aleja hacia la izquierda o derecha en función de la variable llamada haciaLaDerecha que es booleana e indica la dirección que sigue el objeto. (si el objeto sale de pantalla haga click con el mouse y el objeto volverá al centro de la pantalla y cambiará de dirección)
int x; boolean haciaLaDerecha; void setup(){ size(200,200); smooth(); x = width/2; //inicia del centro haciaLaDerecha = true; //establece como dirección la derecha } void draw(){ background(0,0,50); ellipse(x,100,20,20); if( haciaLaDerecha ){ x++; //incrementa si haciaLaDerecha es true } else{ x--; //decrementa si haciaLaDerecha es false } } void mousePressed(){ x=width/2; //si se presiona el mouse vuelve al punto //central y haciaLaDerecha = !haciaLaDerecha; //cambia de dirección } En el ejemplo podemos ver como en función de la variable booleana llamada haciaLaDerecha , se produce un incremento (x++) o un decremento (x--). Al presionar el mouse, el objeto vuelve al centro (x=width/2), a la vez que cambia de dirección, dado que la instrucción "haciaLaDerecha = !haciaLaDerecha", cambia el valor de la variable de true a false y viceversa, funciona como un interruptor ON/OFF. ON/OFF. Entonces ya que establecimos con la variable haciaLaDerecha la dirección en que se mueve el objeto, entonces ahora podemos hacer que este cambie de dirección cuando este choca el borde:
int x; boolean haciaLaDerecha; void setup(){ size(200,200); smooth(); x = width/2; //inicia del centro haciaLaDerecha = true; //establece como dirección la //derecha } void draw(){ background(0,0,50); ellipse(x,100,20,20); if( haciaLaDerecha ){
x++; //incrementa si haciaLaDerecha es true if( x > width ){ //si choca el borde derecha haciaLaDerecha = false; //cambia //de dirección } }else{ x--; //decrementa si haciaLaDerecha es false if( x < 0 ){ //si choca el borde izquierdo haciaLaDerecha = true; //cambia //de dirección } } } Cuando el objeto se dirije hacia la derecha (es decir cuando la variable haciaLaDerecha es true), entonces el borde se evalúa preguntando si x es mayor que width, mientras que cuendo el objeto se dirije a la izquierda, dicha evaluación se realiza preguntado si x es menor que cero.
Aprovechando el signo positivo o negativo El ejemplo que sigue hace lo mismo que el anterior, sólo que en vez de tener una variable booleana llamada haciaLaDerecha , tiene una variable entera llamada paso que se encarga de señalar la dirección así como de establecer el incremento o decremento. Veamos cómo hace esto:
int x; int paso; void setup(){ size(200,200); smooth(); x = width/2; //inicia del centro paso = 2; } void draw(){ background(0,0,50); ellipse(x,100,20,20); x += paso; //cuando paso es negativo, esto es un //decremento if( x > width || x < 0 ){ //si choca algún borde paso *= -1; //cambia de dirección } } La clave de este programa está en la operación "x += paso", dado que si paso es positivo (en este caso el valor 2), entonces esta operación es un incremento (y por ende el objeto se desplaza hacia la derecha), pero cuando paso tiene un valor negativo ( -2 ), entonces esta operación es un decremento (sumar a un valor otro negativo es el equivalente a restar) y por ende el objeto se dirije a la izquierda. Esta posibilidad del uso del signo para poder realizar decrementos o incrementos con una sola operación nos permite transformar el cambio de dirección en un cambio de signo, lo que se resuelve en la operación " paso *= -1", que significa multiplicar a paso por -1 (menos uno). Dado que ambos cambios de dirección son idénticos, entonces podemos evaluar una única condición que se ver si x se pasó de algún borde (x > width || x < 0).
En dos dimensiones El ejemplo que sigue traslada estos conceptos de movimiento unidimensional a un movimiento bi-dimensional. Simplemento duplicamos las variables x y paso con otras para el movimiento vertical (y y pasoY), dado que el paso del movimiento vertical se llama pasoY, decidí cambiar el nombre de paso por pasoX. Para el límite vertical usamos la variable de sistema height que es la altura de la pantalla. Note que cambiamos la altura con respecto a la anchura, así como el paso de avance horizontal con respecto al vertical, para mostrar que el ejemplo aún funciona:
int x,y; int pasoX,pasoY; void setup(){ size(200,300); smooth(); x = 87; y = 13; pasoX = 2; pasoY = 4; } void draw(){ background(0,0,50); ellipse(x,y,20,20); x += pasoX; //movimiento horizontal if( x > width || x < 0 ){ //bordes horizontales pasoX *= -1; //cambia de dirección horizontal
} y += pasoY; //movimiento vertical if( y > height || y < 0 ){ //bordes verticales pasoY *= -1; //cambia de dirección vertical }
Estructuras de control iterativas (repetitivas) Introducción Cuando en un apartado anterior introdujimos el tema de las estructuras de control, se dijo que existían dos tipos principales de estructuras: las condicionales y la iterativas (o repetitivas, que es un sinónimo). Mientras que las estructuras condicionales permiten bufurcar el flujo de ejecución en función de una condición, las estructuras iterativas permiten repetir una porción de código en función de una condición.
Los ciclos for-next La estructura iteartiva más utilizada es la que se conoce como ciclo for-next . Esta estructura permite repetir, una cantidad determinada de veces, las instrucciones que se encuentran en su interior. Como veremos a continuación, la estructura posee tre parámetros que son: la inicialización, la condición y el incremento:
... for( inicializacion ; condición ; incremento ){ cuerpo de la estructura } ... Como muestra el esquema anterior, estos tres parámetros van separados por puntos y comas (;) a diferencia de la mayoría de las instrucciones en donde los parámetros en que los parámetros van separados por comas (,). En el ejemplo a continuación se muestra una ciclo for-next utilizado para repetir una instrucción 3 veces:
size(200,200); int a = 10; for(int i=0 ; i<3 ; i++){ rect( a , 75 , 50 , 50 ); a += 60; } En el ejemplo anterior, las intrucciones que se encuentran en el interior del ciclo for-next ( "rect( a , 75 , 50 , 50 )" y "a += 60") se repiten 3 veces. Es decir que este programa es el equivalente al que sigue, donde la variable a va adoptando los valores 10,70 y 130, que son las posiciones horizontales de los cuadrados:
size(200,200); int a = 10; rect( a , 75 , 50 , 50 ); a += 60; rect( a , 75 , 50 , 50 ); a += 60; rect( a , 75 , 50 , 50 ); a += 60; ¿Cómo es que se produce esta repetición? Bueno, la forma en que la estructura se ejecuta es la siguiente: Paso 1: en el primer ciclo se ejecuta la inicialización (en este caso se declara la variable entera llamada i, y se le asigna el valor 0 ) y luego se evalua la condición (en este caso se evalua si el valor de la variable i es menor a 3) y si se cumple se ejecuta el cuerpo de la estructura . Paso 2: en el siguiente ciclo, ya no se ejecuta la inicialización, sino que se ejecuta el incremento (en este caso i++, que significa incrementar en 1 el valor de la variable i) y luego se vuelve a evaluar la condición (nuevamente i<3) y si se cumple la condición se vuelve a ejecutar el cuerpo del ciclo. Paso 3 al N-ésimo: a partir de aquí la estructura repite los mismos paso que el paso 2. En el ejemplo anterior, se inicia la variable i en 0 y como cumple la condición de ser menor a 3 (0 es menor que 3), entonces se ejecuta el cuerpo ( "rect( a , 75 , 50 , 50 )" y "a += 60"), luego se incrementa i (i++) y como i vale 1 y sigue siendo menor a 3, se vuelve a ejecutar el cuerpo, posteriormente vuelve a hacer el incremento y a evaluar la condición e i que pasa a valer 2 sigue siendo menor que 3, y se vuelve a ejecutar el cuerpo, hasta que en el siguiente incremento i pasa a valer 3 que ya no es menor a 3 (sino igual), y por ende termina el ciclo.
La condición En un ciclo for-next es muy importante que la condición se dé al menos una vez, por que sino no se ingresa nunca en el ciclo:
size(200,200); int a = 10; for(int i=4 ; i<3 ; i++){ //esta línea se modifico poniendo i=4 rect( a , 75 , 50 , 50 ); a += 60; } En el ejemplo anterior se muestra queque la condición de i<3 nunca se cumplirá dado que el valor de i se inicia en 4, por ende nunca se ingresa al ciclo y las instrucciones que está en su interior nunca serán ejecutadas. Tanto la inicialización, como la condición y el incremento, son muy flexible y permiten utiilizar una gran rango de operaciones y valores. Por ejemplo la inicialización puede ser con valores distintos de 0 y el incremento puede ser de valores diferentes a 1 , así como otras operaciones metamáticas más allá de la suma:
for(int i=1 ; i<10 ; println(i); } for(int i=10 ; i>0 ; println(i); } for(int i=1 ; i<=256 println(i); // hasta }
i+=2){ //imprime los números impares del 1 al 9 i--){ //este sería un ciclo que decrece desde 10 a 1 ; i*=2){ //en este los valores se duplican desde 1 256, pasando por 2,4,8,16,32,64 y 128
Los bucles infinitos Otro caso importante de tener en cuenta es el caso del bucle infinito, en donde la condición nunca deja de cumplirse y por ende el ciclo nunca termina. Cuando esto sucede, generalmente queda bloqueada la máquina (colgada) y a veces es necesaria apagarla y volver a encenderla:
// si no desea colgar su computadora NO EJECUTE ESTE CÓDIGO for(int i=1 ; i>0 ; i++){ println(i); } Como se puede ver en el caso anterior, la condición de i>0 se cumple siempre, dado qie i se inicia con el valor 1 y en cada paso se incrementa, pasando por 2, 3, 4, 5, 6, ... y así hasta el infinito.
La practicidad de los parámetros En el primer ejemplo, la variable a que usamos para determinar la ubicación de los cuadrados, adquiere los valores 10, 60, 130, mientras que la variable del ciclo for-next pasa por los valores 0, 1 y 2. Es posible que la misma variable i del ciclo adopte los valores que necesitamos para ubicar a los cuadrados:
size(200,200); for(int i=10 ; i<=130 ; i+=60){ rect( i , 75 , 50 , 50 ); } Esto es posible por que los valores se incrementan en forma fija (saltando de a 60). Cabe aclarar que la variable del ciclo for-next puede tener cualquier nombre.
Los ciclos anidados Supongamos que queremos hacer un tablero de ajedrez, es decir un tablero de 8x8 cuadros en donde se alternan los cuadros negros y blancos. El primer problema al que nos enfrentamos es el de hacer los 8x8 cuadros, independientemente del color que tengan. Para hacer una única hilera de cuadrados podemos seguir los ejemplos anteriores:
size(200,200); for(int i=0 ; i<8 ; i++){ rect( i * 25 , 0 , 25 , 25 ); } Si quisieramos repetir 8 veces esta hilera modifiando su posición vertical, entonces debemos anidar dos ciclos for-next , haciendo que un nuevo ciclo (exterior al anterior) repita 8 veces las instrucciones necesarias para hacer una hilera:
size(200,200); for(int j=0 ; j<8 ; j++){ //este ciclo repite 8 veces al otro ciclo for(int i=0 ; i<8 ; i++){ rect( i * 25 , j * 25 , 25 , 25 ); //aqui se // agrego "j * 25" } }
Queda pendiente la custión de la alternacia entre cuadros negros y blancos. Para estos aprovecharemos una propiedad del table: como muestra la figura siguiente, si sumamos el número de fila más el número de columna en cada cuadro, notaremos que la alternancia entre resultados pares e impares es equivalente a la de cuadros negros y blancos en una tablero: Por lo que aprovechamos esta propiedad y utilizamos una estructura if-then-else para pintar de negro o blanco en función de la paridad de la suma entre el número de fila y el de columna. En el ejemplo que sigue, el número de fila es j, mientras que el número de columna es i, así que para evaluar si la suma de estos valores es par, verificamos que el resto de dividir dicha suma por 2 sea 0, dado que los números pares devuelven resto 0 al ser divididos por 2. Esto se traduce a preguntar si (i+j) % 2 == 0, dado que el símbolo (%) es el resto de la división entera:
size(200,200); for(int j=0 ; j<8 ; j++){ for(int i=0 ; i<8 ; i++){ if( (i+j) % 2 == 0 ){ //si la suma //fila+columna es par entonces pinta de negro fill( 0 ); }else{ fill( 255 ); } rect( i * 25 , j * 25 , 25 , 25 ); } } Ejemplo: Estructuras de Control Iterativas: For-Next
size(200,200); ellipseMode(CORNER); background(230); for(int a=0;a<200;a+=20){ ellipse(a,a,18,18); } Ejemplo: Estructuras de Control Iterativas: For-Next Anidados
size(200,200); ellipseMode(CORNER); background(230); for(int a=0;a<200;a+=20){ for(int b=0;b<200;b+=20){ ellipse(a,b,18,18); } } Ejemplo: Estructuras de Control Iterativas: For-Next Anidados
void setup(){ size(200,200); } void draw(){ background(230); for(int i=0;i<=200;i+=20){ for(int j=0;j<=200;j+=20){ line(i,j,mouseX,mouseY); } } }
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 ); 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 ); 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 fornext), 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:
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); } } 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.
color c; void setup(){ size(255,255); } void draw(){ for(int i=0;i<=255;i++){ for(int j=0;j<=255;j++){ c= color(mouseX,i,j); set(i,j,c); } } } Otro ejemplo, pero en este el fondo y las figuras tienen distintos degradé que responden al mouse:
color c; void setup(){ size(250,250); noStroke(); ellipseMode(CORNER); } void draw(){ for(int i=0;i<=250;i++){ for(int j=0;j<=250;j++){ c=color(mouseX,i,j); set(i,j,c); } } for(int a=0;a<250;a+=25){ for(int b=0;b<250;b+=25){ c= color(255-mouseX,a,b); fill(c); ellipse(a+2,b+2,20,20); } } } 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. Vasarely.
El ejemplos que sigue tiene como detalle interesante el hecho de que el límite del ciclo for-next está determinado por una variable en vez de una cosntante, lo que significa que la cantidad de veces que se repite la estructura varía en cada ejecución del ciclo. Es importante entender que Processing ejecuta todo el ciclo antes de mostrar el fotograma, recordemos que Processing procesa por defecto 30 fotogramas por segundo, con lo que toda la ejecucióndel ciclo se produce con esta tasa. En el ejemplo que sigue, la condición del ciclo está determinada por una comparación con mouseX:
void setup(){ size(250,250); noStroke(); rectMode(CORNERS); background(0,0,255); } void draw(){ for(int i=0;i<=120 && i< mouseX;i+=10){//en esta lìnea se produce la condición fill(i*2,0,250-i*2); rect(i,i,250-i,250-i); } } Otro ejemplo:
int px,py; void setup(){ size(250,250); noStroke(); rectMode(CENTER); background(0,0,255); } void draw(){ for(int i=0;i<=240;i+=10){ px=int(mouseX/250.0*i+(250-i)/2); py=int(mouseY/250.0*i+(250-i)/2); fill(0,i,0); rect(px,py,250-i,250-i); } } El ejemplo que sigue, dibuja una grilla de cuadrados en donde sus tamaños disminuyen conforme aumenta el número de fila o columna, determinando primero cual de estos dos números es mayor:
int mayor; size(400,400); background(0); rectMode(CENTER); noStroke(); for(int i=0 ; i<20 ; i++){ for(int j=0 ; j<20 ; j++){ if(i>j){ mayor=i; }else{ mayor=j; } rect( i*20+10 , j*20+10 , 20-mayor-1 , 20-mayor-1 ); } } El ejemplo que sigue es idéntico, pero se diferencia en que es vez de ver cuál es mayor de las dos magnitudes (el número de fila o columna), ve cuál es menor:
int menor; size(400,400); background(0); rectMode(CENTER); noStroke(); for(int i=0 ; i<20 ; i++){ for(int j=0 ; j<20 ; j++){ if( i
El ejemplo que sigue es una grilla de círculos en donde su tamaño depende de la posición horizontal del mouse. (Recuerde que algunos navegadores requieren que ud. haga click en el applet para ponerlo en foco y poder interactuar con el mismo):
void setup(){ size(400,400); ellipseMode(CENTER); } void draw(){ background(255); fill(0); float ancho=mouseX/5; for(int i=0;i<=400;i+=40){ for(int j=0;j<=400;j+=40){ ellipse(i+20,j+20,ancho,ancho); } } } En el ejemplo que sigue el criterio es similar. El tamaño está determinado por l a distancia vertical al mouse. Como la posición vertical del mouse es mouseY y el ciclo que recorre las posiciones posiciones verticales verticales de los cículos es j, la distancia vertical está determinada por la operación: abs(mouseY-j) En donde la función abs( ) significa el valor absoluto que es la magnitud de un número desprovisto de signo, es decir que el resultado siempre es positivo sin importar de que el signo del resultado de la resta mouseY-j dé negativo:
void setup(){ size(400,400); ellipseMode(CENTER); } void draw(){ background(255); fill(0); for(int j=0;j<=400;j+=40){ float ancho=abs(mouseY-j)/5; for(int i=0;i<=400;i+=40){ ellipse(i+20,j+20,ancho,ancho); } } }
Números pseudo-aleatorios El azar y los números pseudo-aleatorios En la computación no existen los números al azar dado que la computadoras son máquinas "idealmente" determinista, existen varios factores físicos que agregan un factor de aleaoriedad a las computadoras, pero en principio las computadoras son deterministas. Debido a esto y a la necesidades que surgen de disponer de valores aleatorios, existen funciones de números pseudo-aleatorios que nos permiten escapar del determinismo computacional. Estas funciones son capaces de generar secuencias de números con patrones análogos a los números aleatorios. En Processing la función que permite generar números pseudo-aleatorios se llama random( ) y puede usar uno o dos parámetros. Si usa uno, la función arroja números cada vez que se la invoca, restringiendo estos valores entre cero y el valor del parámetros. En el ejemplo siguiente la función random( ) arroja valores entre 0 y 10:
void setup(){ } void draw(){ float a = random(10); println( a ); } Estos valores pueden ser utilizados para obtener parámetros como la posición de un rectángulo en la pantalla:
void setup(){ size(200,200); background(0); fill(100,100,255,100); } void draw(){ rect( random(width) , random(height) , 20 , 20 ); } void mousePressed(){ background(0); }
En este ejemplo las funciones random(width) y random(height) devuelven valores pseudo-aleatorios para la posición horizontal (entre cero y el ancho de la pantalla) y para la posición vertical (entre cero y el alto de la pantalla). Mientras no se presione el mouse, el draw( ) acumula cuadrados en la pantalla.
Límite superior e inferior Tambiém es posible restringir el límite inferior y superior de la función random( ) usando dos parámetros: En el ejemplo que sigue, la función random(10,20) devuelve valores pseudo-aleatorios entre 10 y 20:
void setup(){ } void draw(){ float a = random(10,20); println( a ); } Esto es útil en casos como el del ejemplo que sigue, en el que queremos que los números de la secuencia ronden por las valores de la posición horizontal y vertical del mouse:
int col; void setup(){ size(400,400); background(0); colorMode(HSB); col = 0; } void draw(){ col = (col+1) % 256; fill(col,255,255,100); ellipse( random(mouseX-30, mouseX+30) ,random(mouseY-30,mouseY+30) , 20 , 20 ); } void mousePressed(){ background(0); } En este ejemplo las funciones random( mouseX-30 , mouseX+30 ) y random( mouseY-30 , mouseY+30 ) devuelven valores al pseudo-aleatorios dentro de los un rango de 30 píxeles verticales y horizontales del mouse. Cuando se presiona el botón, se ejecuta el background(0) que pinta el fondo de negro. La forma en que se suceden cíclicamente los colores es por el uso de la paleta HSB, Processing permite usar esta paleta cuya sigla significa Hue, Saturation y Brightness (Tinte, Saturación y Brillo). Con la instrucción colorMode(HSB) se determina que se usara la paleta HSB (caso contrario sería colorMode(RGB) para la paleta RGB). Usando esta paleta las instrucciones de pintado, como fill( ) usan 3 o 4 parámetros: tinte, saturación, brillo y opacidad (en caso de usar 4 parámetros). Así la variable llamada col y que tiene un incremento cíclico dada la operación "col = (col+1) % 256", permite ir cambiando el tinte.
El ruido El ejemplo que sigue utiliza la función random( ) para agregarle ruido de desenfoque a la imagen. Para ello, imprime la imagen pixel por pixel pero el color lo toma de otro pixel ligeramente vecino a este. Para trabajar con los pixeles de la imagen usa un tipo de datos de Processing llamado PImage que permite levantar un jpg. (con la función loadImage( ) ), imprimirla en pantalla con la instrucción image( ), así como leer el color de cada uno de sus píxeles con la función get( ). El nivel de ruido depende de la posición vertical del mouse:
PImage imagen; // tipo PImage para cargar imágenes void setup(){ size(200,300); imagen = loadImage("rana.jpg"); //carga un jpg background(0); //pinta de negro image(imagen, 0, 0); //imprime la imagen } void draw(){ float des = (height-mouseY) / 20; //determina el nivel de desenfoque en función de la posición vertical del mouse for(int x=0 ; x<200 ; x++){ //recorre horizontalmente for(int y=0 ; y<150 ; y++){ //recorre verticalmente color este; //declara la variable este de tipo color este = imagen.get( x+int( random(-des,des) ) , y+int( random(-des,des) ) ); //toma el color de un pixel con un nivel de desenfoque set( x , y+150 , este ); //imprime el color del pixel tomado } } }
El desenfoque se produce por que en vez de tomar el color del pixel que le corresponde se lo desplaza ligeramente a través de número pseudo-aleatorios, esto sucede en la instrucción:
este = imagen.get( x+int( random(-des,des) ) , y+int( random(-des,des) ) ); En donde imagen.get(
, y ) lee el color del pixel x,y. En este caso en vez de x se le pasa como parametro:
x
x+int( random(-des,des) ) Que combina la función int( ) que transforma los valores reales de la función random( ) en valores enteros. Cuanto más grande sea el valor de la variable llamada des, mayor será el desenfoque que produce.
La aleatoriedad como recurso expresivo El ejemplo que sigue aprovecha el random( ) como un recurso expresivo. En cada vuelta de animación, elige un pixel al azar de la imagen, captura su color y luego imprime un rectángulo con una tamaño decidido al azar y con el mismo color (más transparente) que el pixel original. Si presiona el mouse el procedimiento se reinicia:
PImage imagen; // tipo PImage para cargar imágenes void setup(){ size(400,450); imagen = loadImage("rana.jpg"); //carga un jpg noStroke(); rectMode(CENTER); background(0); //pinta de negro image(imagen, 0, 0); //imprime la imagen } void draw(){ float des = (height-mouseY) / 20; //determina el nivel de desenfoque en función de la posición vertical del mouse color este; //declara la variable este de tipo color int x = int( random(200) ); //toma una posición horizontal al azar int y = int( random(150) ); //toma una posición vertical al azar este = imagen.get( x , y ); //toma el color del pixel elegido fill( red(este) , green(este) , blue(este) , 100 ); //usa ese color como relleno dándoles cierta transparencia stroke(este); //usa ese color de contorno float lado = random(3,20); //elige el tamaño del cuadrado para pintar el pixel rect( x * 2 , y * 2 +150, lado , lado ); //pinta el pixel duplicando el tamaño del dibujo } void mousePressed(){ background(0); //pinta de negro image(imagen, 0, 0); //imprime la imagen }
Arreglos Introducción Como vimos en los apartados anteriores, las estructuras iterativas permiten repetir un proceso una gran cantidad de veces, en contraste, cuando se desea realizar un tratamiento homogéneo sobre una gran cantidad de información, las variables, como se han visto hasta aquí, son insuficientes. Esto es debido a que cuandosi desea repetir un procesos sobre una gran cantidad de variables es necesario recurrir a estas haciendo referencia a diferentes nombres, lo que imposibilita utilizar una estructura repetitiva. Por ejemplo, el siguiente es un programa para realizar un promedio de un alumno:
float calificacion1 = 9.5; float calificacion2 = 7; float calificacion3 = 5; float total = 0; int cantidad = 3; total += calificacion1; total += calificacion2; total += calificacion3; float promedio = total/cantidad; Si la cantidad de calificaciones a ser promediadas fuesen muchas (por ejemplo 500) el anterior procedimiento no sería aplicable. En una caso como este sería deseable contar con algún tipo de variable que a partir de un único identificador
(nombre de la variable) permitiese acceder a gran cantidad de información para der el mismo tratamiento a toda esta información.
Los arreglos Los arreglos (ver (ver definición en wikipedia) wikipedia) son variables que permiten acceder a una gran cantidad a partir de una único identificador y un índice. Los arreglos pueden ser de varias dimensiones en función de la cantidad de índices que utilizan. Los arreglos de una dimensión son llamados vectores, los de dos dimensiones se llaman matrices, los de tres o más dimensiones se llaman tensores. Los arreglos además de ser inicializados, deben ser dimensionados, asignándoles una extensión, es decir la cantidad de celdas de memoria que utilizará:
float[] calificacion; //inicializacion del arreglo calificacion = new float[100]; //dimensión del arreglo calificacion[0] = 9.5; //asignacion de la primer celda calificacion[1] = 7.0; //asignacion de la segunda celda … También es posible dimensionar y asignar datos en un mismo paso, como se muestra en el siguiente ejemplo:
// inicializacion, dimensión // y asignaciones del arreglo float[] calificacion = { 9.5 , 7 , 6.5 , 8 , 10 }; float total = 0; int cantidad = calificacion.length(); for( int i=0 ; i
Un ejemplo interactivo El ejemplo que sigue permite generar círculos con el mouse, haciendo click en el fondo se genera un nuevo círculo, y cuando se hace click sobre un círculo ya creado, se le modifica el color y se lo arrastra.
float[] x , y , tinta , radio ; //declaracion de los arreglos // necesarios para dibujar los círculos: la posición -x,y// el color -la tinta- y el tamaño -radioint limite; //variable para definir el limite de los arreglos int cantidad; //variable para contar los circulos void setup(){ size(400,400); // INICIALIZAR LA MEMORIA limite = 50; //se define que la cantidad limite de circulos es de 50 cantidad = 0; //se inicia la cantidad de circulos en cero x = new float[limite]; //declara los arreglos con 50 posiciones de memoria cada uno y = new float[limite]; tinta = new float[limite]; radio = new float[limite]; colorMode(HSB); noStroke(); smooth();
} void draw(){ background(240); if( mousePressed ){ //verifica si se presionó el mouse boolean tocoAlguno = false; //se declara esta variable para verificar si el mouse toco // algún círculo // VERIFICA SI SE HIZO CLICK SOBRE UN CÍRCULO YA EXISTENTE for( int i=0 ; i
} } //SI NO TOCÓ NINGÚN CÍRCULO if( ! tocoAlguno && cantidad
}
} // DIBUJAR LOS CÍRCULOS ALMACENADOS EN MEMORIA for( int i=0 ; i
Para poder realizar esta aplicación, se necesita algún tipo de memoria que guarde las posiciones, colores y tamaños de cada uno de los círculos que son creados para luego poder dibujarlos en forma actualizada. La estructura general de esta aplicación en pseudocodigo es la siguiente:
void setup(){ Inicializar la memoria } void draw(){ if( mousePressed ){ if( Hizo clik sobre un círculo ya existente ){ Cambiar el aspecto del círculo seleccionado } if( No toco ningún circulo ){ Almacenar en memoria un nuevo círculo } } Dibujar los círculos almacenados en memoria } El esquema anterior no es código ejecutable, sino un esquema que combina código ejecutable y explicaciones literales para mostrar la estructura del programa. Luego veremos que las explicaciones literales serán reemplazadas por código ejecutable, de hecho, en el código fuente del ejemplo hay comentarios que indícan las partes correspondientes a estos literales. Si revisamos con atención el esquema anterior veremos que la idea es crear y actualizar una memoria donde se almacenan las posiciones, posiciones, colores colores y tamañ tamaño o de los círculos que hay en pantalla. pantalla. Luego un parte de la estructura estructura se encarga de dibujar en cada ciclo del void draw() a los círculos que hay almacenados hasta el momento. Cabe aclarar que la instrucción if( mousePressed ){ está preguntando "si el mouse está siendo precionado", dado que mousePressed es una variable de estado que permite saber si el mouse está siendo presionado o no. Esta variable es boolean y devuelve true cuando el mouse está siendo presionado, y false cuando no lo está. La forma en que se implementa i mplementa esta memoria es utilizando arreglos. Para la realización de esta aplicación es necesario crear cuatro arreglos que sirven para almacenar la posición, color y tamaño de los círculos. Estos arreglos se declaran fuera del void setup() y del void draw() para que sean globales, es decir, para que puedan ser visto desde cualquier parte del algoritmo. Si por el contrario, fueran declarados dentro de alguna de estas estructuras (por ejemplo el void setup() ) no podrían ser accedidos desde fuera de dicha estructura. También se declaran dos variables: limite y cantidad, que son utilizadas para especificar la cantidad límite de círculos que se pueden crear (imite) y la cantidad memoria : creada hasta el momento (cantidad). El código a continuación es el necesario para inicializar la memoria :
float[] x , y , tinta , radio ; int limite; int cantidad; void setup(){ size(400,400); limite = 50; cantidad = 0; x = float[limite]; y = new float[limite]; tinta = new float[limite]; radio = new float[limite]; … La variable cantidad funciona de la siguiente manera: cuando inicia la aplicación la variable tiene valor igual a cero. Cuando el usuario hace click, si no se ha tocado ningún círculo, se genera un nuevo círculo. Se le asigna la posición tomando las coordenadas del cursor y cargándola en los arreglos x e y. El color y el tamaño se establecen asignandoles valores al azar a los arreglos tinta y radio, respectivamente. Cuando el círculo que se agrega es el primero, el valor de
cantidad es cero y por lo tanto los valores del primer círculo se carga en la primer c elda de los arreglos, es decir en la que tiene índice igual a cero. Pero inmediatamente después se incrementa el valor de de la variable cantidad , esto se hace con dos fines: para registrar la cantidad de círculos almacenados y para saber el siguiente lugar disponible para cargar un círculo. El siguiente código es el que sirve para almacenar en memoria un nuevo círculo :
... if( mousePressed ){ ... if( ! tocoAlguno && cantidad
Cuando el usuario hace click y no se ha tocado ningún círculo, entonces se ingresan los valores de la posición, color y tamaño en los arreglos, usando el valor de cantidad como índice, es decir se carga el índice cero de cada uno de los arreglos. Por lo que x[cantidad]=mouseX se traduce como x[0]=mouseX, y se carga el valor de la posición horizontal del mouse en la primer celda (la celda con índice cero) de X:
Luego se incrementa en uno a la variable cantidad, por lo que pasa a valor uno. En este momento la variable cantidad indica exactamente la cantidad de datos cargados por arreglo, pero también indica el valor del siguiente índice donde se cargaran los nuevos datos:
Cuando el usuario vuelve a hacer click, vuelve a cargar los datos en el índice que indica la variable cantidad, pero en este caso x[cantidad]=mouseX se traduce como x[1]=mouseX, dado que ahora el valor de cantidad es uno:
Luego vuelve a incrementar la variable cantidad que pasa a valer dos, y nuevamente muestra la cantidad de datos cargados y el próximo índice a utilizar. Dado que la variable cantidad sirve para saber, justamente, la cantidad de círculos almacenados hasta el momento, esta información es útil para recorrer los arreglos con un ciclo for a la hora de imprimir los círculos en pantalla, como muestra el código para dibujar los círculos almacenados en memoria :
... for( int i=0 ; i
dado o que i vale cero, se traduce como ellipse( x[0] , y[0] , radio[0]*2 , radio[0]*2 ). Y dad x[0], y[0] y radio[0] valen 56, 108 y 30, respectivamente, entonces la instrucción queda finalmente así: ellipse( 56 , 108 , 30*2 , 30*2). Por último, queda por ver cómo es que se selecciona un círculo y a existente. La forma en que se realiza esto es recorrer uno por uno los círculos y verificar si la distancia entre el mouse y el centro del círculo es menor al radio: Para revisar la distancia, Processing tiene una función llamada dist(), a la que se le pasa 4 parámetros que son las posiciones X e Y de los dos puntos entre los que se quiere medir la distancia: Así para revisar uno por uno las distancia del mouse a cada uno de los centros de los índice i cada uno de los círculo y preguntar círculos, se usa un ciclo for que recorre con el índice por la distancia al mouse: dist( x[i] , y[i] , mouseX , mouseY ) < radio[i] El código que sigue sirve para verificar verific ar si hizo clik sobre un círculo ya existente y en caso de ser así, entonces cambiar el aspecto del cículo seleccionado :
... boolean tocoAlguno = false; for( int i=0 ; i
Ejemplos El siguiente ejemplo permite grabar la huella que se deja cuando se mueve el mouse. Para eso usa dos vectores llamados X e Y que son recorridos por dos contadores llamados cont e i, que sirven para mover la cabeza grabadora y la cabeza de reproducción, respectivamente:
boolean grabando; //variable que indica el estado int[] x,y; //vectores donde se cargan las posiciones del mouse int cont,i; int contColor; void setup(){ size(400,400); noStroke(); colorMode(HSB);
}
grabando = false; //se inicia en modo reproducción x = new int[100000]; y = new int[100000]; cont = 0; i = 0; contColor = 0;
void draw(){ contColor = (contColor+1) % 256; //incrementa cíclicamente de 0 a 255 fill(0,0,0,10); //pinta el fondo de color rect(0,0,width,height);//negro transparente fill(contColor,255,255,60); //pone el color de relleno de los círculos grabando = mousePressed; //si el mouse está siendo presionado pasa a modo grabación if(grabando){
}
ellipse(mouseX,mouseY,10,10); x[cont]=mouseX;//guarda un nuevo dato y[cont]=mouseY; cont++; //incrementa el puntero
ellipse(x[i],y[i],50,50);
}
i++; //con esta variable recorre el reproductor if(i>=cont){ i=0; }
El siguiente ejemplo permite dibujar rectánguloas presionando y arrastrando el mouse.
int estado,cont; int[] x1=new int[1000]; int[] x2=new int[1000]; int[] y1=new int[1000]; int[] y2=new int[1000]; int actualX1,actualY1; void setup(){ size(400,400); rectMode(CORNERS); estado=0; cont=0; } void draw(){ background(0); stroke(0,255,0); noFill(); rect(375,1,398,25); line(375,1,398,25); line(375,25,398,1);
//dibuja //el boton de la esquina //superio derecha
fill(0,255,0,30); for(int i=1;i<=cont;i++){ //imprime todos los rectangulos ya grabados, de color verde rect(x1[i],y1[i],x2[i],y2[i]); } if(estado==1){ //si el botón del mouse está presionado (es decir que está generando un rectangulo) stroke(0,0,255); //pone color rojo para el que se está generando fill(0,0,255,30); rect(actualX1,actualY1,mouseX,mouseY); } } void mousePressed(){ if(mouseX>357 && mouseY<25){//si el mouse fue presionado en el cuadrado de la esquina entonces cont=0; //borra todo estado=0; } else{ estado=1; //cuando se presiona el boton estado pasa a 1 (generación) actualX1=mouseX; //guarda los datos de la actualY1=mouseY; //primer esquina del rectangulo } } void mouseReleased(){ if(!(mouseX>357 && mouseY<25)){//si el mouse no fue presionado en el cuadrado de la esquina entonces estado=0; cont++; //cuenta un nuevo rectangulo x1[cont]=actualX1; //y agrega el nuevo rectangulo y1[cont]=actualY1; x2[cont]=mouseX; y2[cont]=mouseY; } }
