Inicio a Processing

Vamos a iniciarnos con Processing, un programa que transforma un código que no es capaz de leer un ordenador en un programa que si es capaz de leerlo.

Generalmente insertaremos los colores con el famoso R, G, B, por lo que nos servirá de gran ayuda este esquema para poder conseguir el color deseado.

Para poder indicar la posición donde queramos que se sitúe en la pantalla la línea, circunferencia,... Utilizaremos las coordenadas X e Y, que se sitúan en la pantalla de la siguiente forma.

Ahora podemos comenzar a usar Processing, así que comenzaremos por lo básico, insertando la línea del ejemplo:

1	line(0, 0, 100, 100);

Iniciamos el programa pulsando el siguiente icono  y veremos que ocurre:


Pon tanto, en función del comando que utilicemos podremos programar distintos elementos:
-Con "line" insertamos una línea.
-Con "stroke" cambiamos el color de la línea.
-Con "background" cambiamos el color del fondo.

Así pues, programaremos el siguiente ejemplo;

background(255); line(0, 0, 100, 100); stroke(0, 0, 255); line(0, 100, 100, 0);

Y vemos que ocurre:


Ahora, probaremos distintos códigos:

background(16, 255, 0);     stroke(250, 0, 0);     line(0, 0, 100, 100);     stroke(0, 0, 255);     line(0, 50, 100, 50);

Y ocurre lo siguiente:


Para hacer más claro el programa, utilizaremos variables, cuya función es sustituir los valores que queramos. Para ello, primero probaremos el ejemplo:

int value1 = 0; int value2 = 100; line(value1, value1, value2, value2); line(value1, value2, value2, value1);

Y ocurre lo siguiente:


Ahora, probaremos a cambiar los valores:

int francisco = 0;   int processing = 50;   line(francisco, processing, processing, processing);   line(francisco, francisco, processing, processing); Y vemos lo que ocurre:

Pero no siempre utilizaremos el comando "int" para cambiar los valores, sino que utilizaremos los siguientes, ya que son los más comunes:

int: Número entero, p.ej., 2, 99 o 532.
float: Número decimal, p.ej., 2.76, 8.211 o 900.3.
boolean: Puede ser verdadero o falso.
char: Un caracter, p.ej. ‘r’, ‘2’ o ‘%’.
String: Una secuencia de carateres, p.ej. “hola”, “¡Me encanta programar!” o “&%!@¤”.

Además,Processing incluye algunas variables de sistema para hacerlas más accesibles dentro de tus programas. Un ejemplo es width y height. Estas variables devuelven la anchura (width) y altura (height) de la ventana de tu programa. Éste es un pequeño ejemplo:

size(400, 200); ellipse(width/2, height/2, width, height);

Lo ejecutamos y observamos lo siguiente:

Así pues, determinamos que el comando "size" nos permite cambiar el tamaño de la pantalla y el comando "ellipse", insertar un elipse. Ahora, procederemos a cambiar los valores del código anterior:

background(255, 0, 0);  stroke(0, 255, 0);  size(400, 300);  ellipse(200, 150, 400, 250);

Con Processing, puedes crear programas que se ejecuten continuamente utilizando la función draw(). Esta función repetirá el bloque de código una y otra vez hasta que el programa se pare. Sin embargo, no todo el código escrito necesita ser repetido continuamente. Para el código que sólo necesita ser ejecutado una única vez, debes usar la función llamada setup().

Vamos a escribir de nuevo un programa que dibuje una línea, pero esta vez utilizando las nuevas funciones:

void setup() { size(300, 300); } void draw() { line(0 ,0, width, height); }

Nuevos comandos:
.-setup(): El código dentro de las llaves se ejecuta una única vez cuando el programa empieza. Sólo necesitamos establecer el tamaño de la ventana una vez, al principio del programa.
.-draw(): El código entre llaves se ejecuta una y otra vez. Se ejecuta línea por línea, de arriba a abajo hasta la última línea, donde vuelve a empezar desde el principio.
.-mouseX: La coordenada X del puntero del ratón.
.-mouseY: La coordenada Y del puntero del ratón.

Ahora, programaremos el siguiente ejemplo:

void setup() { size(300,300); } void draw() { line(0, 0, mouseX, mouseY); }

Y observamos el programa:


Ahora, probaremos a iniciar un programa inventado por nosotros en el que aplicaremos todo lo aprendido hasta ahora:

int raton = 150;   int teclado = 300;   void setup() {   size(300, 300);   background(255, 0, 0);   }      void draw() {   stroke(0, 255, 0);   line(raton, raton, mouseX, mouseY);   } Y ahora, probaremos otro ejemplo inventado, pero esta vez estableciendo los colores que  queramos exactamente gracias a la herramienta de selector de colores: Y ahora, probaremos el siguiente código:   int francisco = 100;   int processing = 200;   void setup() {   size(200, 200);   background(#4C9341);   }   void draw() {   stroke(255, 0, 0);   ellipse(francisco, francisco, processing, processing);   stroke(0, 0, 255);   line(0, 0, processing, processing);   } Dentro del propio programa Processing, en ayuda, encontramos "referencia" donde podemos  encontrar una gran lista de comandos a la cual podemos acceder en cualquier momento y  cómo se introducen éstos en el programa. A continuación realizaremos una serie de proyectos para llevar a cabo lo aprendido,  empezaremos por la "Serpiente roja". Primero comenzaremos por programar un simple círculo, para ello aplicaremos los  nuevos comandos: .-noStroke(): Este comando es usado para no dibujar el contorno de las siguientes figuras. .-fill(red, green, blue): Establece el color utilizado para rellenar las siguientes  figuras. En este ejemplo rellenará el círculo de color rojo. Ahora, introduciremos el código del ejemplo para conseguir el círculo: void setup() {   size(400, 400); } void draw() {   noStroke();                  fill(255, 0, 0);             ellipse(100, 100, 30, 30); } Y observamos el círculo:  Ahora, conseguiremos que se mueva el elipse, para ello, solo necesitamos cambiar el  origen del elipse del código anterior por mouseX y mouseY, es decir, que el origen del elipse sea el ratón. void setup() {   size(400, 400); } void draw() {   noStroke();                  fill(255, 0, 0);             ellipse(mouseX, mouseY, 30, 30); } Y observamos qué podemos hacer: Ahora vamos a cambiar el color. El cambio de color dependiendo del tiempo puede  hacerse de diferentes maneras. El color puede cambiar entre 0 y 255 (negro y rojo  respectivamente). El siguiente ejemplo muestra como reducir la cantidad de rojo en  cada instante que se ejecuta draw(). Ahora, debemos aprender a usar un nuevo comando: .-if( test ){ statements }: Comprueba si test es cierto. En este ejemplo,  si rojo es menor que 0. Si es así, los statements entre llaves son ejecutados. En este ejemplo, establece red a 255 de nuevo.  Por tanto, introduciremos el siguiente código: int rojo = 255;    void setup() {   size(400, 400); } void draw() {   rojo = rojo - 1;               if (rojo < 0){      rojo = 255;                 }       noStroke();                fill(rojo, 0, 0);             ellipse(mouseX, mouseY, 30, 30);  } Y observamos lo que ocurre: Para cambiar los colores más gradualmente, usaremos estos nuevos comandos: .-sin( angle ): Esta función se utiliza para calcular el seno de un ángulo. En nuestro caso, no tiene nada que ver con ángulos pero, ¿te acuerdas de la gráfica del seno de la clase de matemáticas? Bien, esa gráfica es el por qué es útil para nosotros. Siempre que quieras crear una oscilación suave y continua de un movimiento o, en este caso, un cambio de color, sin() es muy práctico de usar. .-PI: Esto es una variable constante que contiene el valor del número pi. .-frameRate: Esto es otra variable que te da el framerate (frecuencia de ejecución)  del programa. Por tanto, ahora procedemos a introducir este código: int rojo = 255; int tiempo = 0; void setup() {   size(400, 400); } void draw() {   tiempo = tiempo + 1;     rojo = int(128 * (1 + sin(tiempo * 2 * PI / frameRate / 20)));      noStroke();                fill(rojo, 0, 0);             ellipse(mouseX, mouseY, 30, 30);  } Y ejecutamos el programa: Ahora, tenemos el último comando necesario para este proyecto: .-fill(red, green, blue, alpha): Hemos añadido un cuarto parámetro alpha  a la función fill(). Esto establece la transparencia del color y su rango va de 0 a 255. Ahora, procedemos a introducir el código definitivo de este proyecto: int rojo = 255; int tiempo = 0; int diametro = 50;    void setup() {   size(400, 400); } void draw() {   tiempo = tiempo + 1;       rojo = int(128 * (1 + sin(tiempo * 2 * PI / frameRate / 20)));   diametro = int(50 * (1 + sin( tiempo * 2 * PI / frameRate / 5))); // Modifica el diametro del circulo con el paso del tiempo       noStroke();               fill(rojo, 0, 0, 50);  // Añade un 50% de transparencia al color   ellipse(mouseX, mouseY, diametro, diametro); } Y observamos la serpiente: Ahora, probaremos a cambiar algunas variables con el siguiente código que acabamos de inventar: int gris = #2DFC00; int tiempo = 0; int diametro = 350; void setup() { size(600, 300); background(255, 0, 0); } void draw() { tiempo = tiempo + 2; gris = int(128 * (1 + sin(tiempo * 2 * PI / frameRate / 10))); diametro = int(50 * (1 + sin( tiempo * 2 * PI / frameRate / 5))); noStroke(); fill(gris); ellipse(mouseX, mouseY, diametro, 123); } Y vemos lo que ocurre: Ahora, haremos otra serpiente roja, bueno, en este caso verde, para concluir el blog. El código es el siguiente: int verde = 255; int tiempo = 0; int diametro = 75; void setup() { size(600, 600); background(#0057FF); } void draw() { tiempo = tiempo + 1; verde = int(128 * (1 + sin(tiempo * 2 * PI / frameRate / 10))); diametro = int(50 * (1 + sin( tiempo * 2 * PI / frameRate / 5))); noStroke(); fill(0, verde, 0, 25); ellipse(mouseX, mouseY, diametro, diametro); } Y observamos todo lo que podemos hacer: