Como se puede apreciar en la imagen anterior, se ha creado una carpeta para mi proyecto: mi_primer_sketch

Como se puede ver, el tamaño de la ventana se corresponde con lo indicado mediante la instrucción size.

PRINTLN

La función println es similar a la llamada System.out.println() de Java. Permite mostrar por consola mensajes para comprobar el valor de una cierta variable o un texto de control.

COMENTARIOS

Los comentarios permiten escribir texto que sirve de guía al programador, para no olvidar qué se está haciendo en una parte del código. Los comentarios, al igual que en Java, pueden ser simples o multilínea.

// Ejemplo de comentario simple

/* Ejemplo de comentario

de varias líneas */

ERRORES

Cuando los parámetros pasados a una función no son correctos, se generará un error. También podemos cometer errores tipográficos. En cualquier caso, se generará un error y no se abrirá un mensaje de dibujo.

Por ejemplo, si escribimos lo siguiente:

Size(200,200);

se producirá un error, ya que Processing es Case-Sensitive (distingue mayúsculas de minúsculas), y la función size se escribe con minúsculas.

También se puede producir un error cuando los parámetros introducidos no son correctos. Por ejemplo:

size("a",200);

generará un error, ya que la función size espera números enteros, no caracteres.

Cuando hay varios errores en un sketch, se muestra sólo el primero.

Referencia de Processing

Processing tiene una referencia muy extensa sobre las funciones que se pueden utilizar. En https://processing.org/reference/ podemos encontrar las funciones clasificadas por tipo. Por ejemplo, si eliges la categoría Shape, podrás ver el conjunto de funciones 2d Primitives. 

Cuando hacemos clic sobre una de las funciones (por ejemplo, arc), vermos una página como la siguiente:

¿Cómo entender cómo se usa una función?

En la sección Syntax, nos indican de cuántas maneras diferentes se puede utilizar la función. En este caso hay dos formas:

arc(a, b, c, d, start, stop)

arc(a, b, c, d, start, stop, mode)

Si nos fijamos en la sección Parameters, veremos que nos indican qué clase de información son los parámetros a, b, c, d, start y stop.

• a, es la coordenada X del arco. Hay que tener en cuenta que la coordenada X = 0, está a la izquierda.

• b, es la coordenada Y del arco. Hay que tener en cuenta que la coordenada Y = 0, está arriba.

• c, es el ancho de la elipse.

• d, es la altura de la elipse.

• start, indica en qué ángulo empieza a dibujarse la elipse. Si queremos podemos utilizar palabras predefinidas que se describen aquí: constantes de Processing

• stop, indica en qué ángulo termina de dibujarse la elipse. Si queremos podemos utilizar palabras predefinidas que se describen aquí: constantes de Processing

Vamos a probar a escribir el siguiente programa y a ejecutarlo:

¿Por qué sale ese dibujo?

Si revisamos el código, el significado de los parámetros es el siguiente.

Por ello, en la ventana resultante obtenemos exactamente eso:

Párametros adicionales

Si nos fijamos en la sección Syntax, hay un parámetro adicional llamado mode que no aparece en la lista de parámetros. A veces ocurre esto, ya que la documentación no es perfecta. Sin embargo, si nos fijamos en la descripción, veremos que indica que existen varios modos:

Si probamos añadiendo este parámetro adicional, podemos obtener diferentes resultados:

Variables

En programación existen las variables. Son palabras a las que podemos asociar un valor. Por ejemplo, podrían ser variables las siguientes:

• posicionJugadorX

• posicionJugadorY

• anchoTanque

• nombreCiudad

Leyendo el nombre de la variable, sabremos que tipo de información queremos guardar en ella. 

Definición de variables

Para poder usar una variable, primero tenemos que definirla. Para definir una variable, hay que decir dos cosas:

• El tipo de información que contiene (por ejemplo, puede ser de tipo numérico, textual, etc.)

• Su nombre

Definiendo una variable de tipo entero

En la siguiente línea se define una variable de tipo entero (int) llamada posicionJugadorX

int posicionJugadorX;

Las cosas que podemos hacer con una variable numérica son:

1. Asignarle un valor

posicionJugadorX = 100;

2. Realizar operaciones  numéricas:

posicionJugadorX = posicionJugadorX + 1;   // incrementando en 1 

posicionJugadorY = posicionJugadorX + 20;  // asignando a posicionJugadorY 

                                           // el valor de posicionJugadorX 

                                           // más 20

3. Utilizarla para dibujar:

rect(posicionJugadorX, posicionJugadorY, anchoJugador, altoJugador);

Los tipos de datos existentes en Java

En Java (el lenguaje que usamos en Processing) hay varios tipos de datos elementales:

• int (es un número entero)

• float (es un número con decimales)

• boolean (sólo puede tomar los valores true o false)

• char (es una única letra)

• String (es un texto, con varias letras)

Definiendo variables de tipo float

De momento, vamos a utilizar int y float. Un número de tipo float es decimal. Observa el siguiente ejemplo:

float incrementoVelocidad = 1.1; // Definición de la variable incrementoVelocidad y asignándole 1.1

float posicionX = 100;  // Definiendo la variable posicionX y asignándole 100

float posicionY = 100; // Definiendo posicionY y asignándole 100

posicionX = posicionX * incrementoVelocidad; // Multiplicando 

                                             // posicionX por incrementoVelocidad

                                             // y asignándolo a

                                             // posicionX            

Nombrado de las variables

Los nombres de las variables empiezan en minúscula. Cada palabra que compone la variable deben ponerse en mayúsculas. Ejemplo: temperaturaHabitacion

Bucles

Los bucles en Processing nos permiten repetir una misma cosa muchas veces. Recuerda la actividad 8. El mismo código, se puede escribir así:

size(600,600);

noStroke();

fill(28, 10, 79,30);

int x = 0;

int y = 0;

int ancho = 600;

int alto = 600;

int repeticion = 1;

while (repeticion < 24){

  x = x + 25;

  rect(x,y,ancho,alto);

  repeticion = repeticion + 1;

}

Copia el siguiente código, ejecútalo para ver el resultado.

Setup y Draw

Las funciones Setup y Draw sirven para:

• Setup: inicialización de variables, tamaño de pantalla, etc.

• Draw: código que se ejecuta una y otra vez (con lo que conseguimos movimiento).

Observa el siguiente ejemplo:

int x;

int y;

void setup(){

   size(400,400);

   x = 0;

   y = 100;

}

void draw(){

  background(0);

  ellipse(x,y,20,20);

  x++;

}

Movimiento del ratón

Para capturar el movimiento del ratón, podemos utilizar las siguientes variables:

• mouseX

• mouseY

De forma que si en el código anterior, en lugar de x e y utilizamos mouseX y mouseY, conseguimos que la elipse se dibuje donde está el ratón.

Por otra parte, la variable mousePressed nos permite saber si el botón izquierdo del ratón está pulsado. La variable mousePressed sólo puede devolver true o false. De este modo, utilizando una sentencia condicional (if) podemos conseguir hacer cosas sólo cuando el ratón está pulsado.

Sentencias condicionales (if)

Una sentencia condicional te permite definir condiciones que se deben cumplir para que algo se ejecute. Esto se hace con if. Observa el siguiente ejemplo:

void setup(){

size(600,600);

}

void draw(){

if (mouseX > 300){

cirecle(mouseX,mouseY,50);

}

}

También podemos especificar qué botón se está pulsando con la siguiente variable:

• mouseButton

Esta variable puede devolver los valores LEFT, CENTER y RIGHT. Así, podemos hacer una comparación como la siguiente, para saber si el botón pulsado fue el derecho:

if (mouseButton == RIGHT){

...

}

if (mouseButton == CENTER){

...

}

if (mouseButton == LEFT){

...

}

Operadores lógicos

Los operadores lógicos en Java son:

• && - para el operador Y

• || - para el operador O

• ! - para el operador NO

En ocasiones nuestras condiciones pueden ser más complejas que una comparación. Por ejemplo, imagina la siguiente especificación:

"Si el ratón está en la mitad derecha de la pantalla, y se está pulsando el botón izquierdo, entonces dibujar un círculo"

Para poder escribir esta condición necesitamos el operador lógico Y:

((mouseX > 300)  Y   (botón izquierdo pulsado))

El código necesario sería como sigue:

if ((mouseX > 300) && (mouseButton == LEFT)){

circle(mouseX,mouseY,30);

}

La función draw

Draw es una función que se ejecuta una y otra vez. Es similar a While (de hecho, internamente, la función draw ejecuta un while que nunca termina). Imagina que quieres pintar círculos sólo cuando pulsas el botón izquierdo:

int radio;

void setup(){

  size(600,600);

  radio = 50;

}

void draw(){

  if (mouseButton == LEFT)

    circle(mouseX, mouseY, radio);

}

El bucle for

Ya hemos visto el bucle while. También tenemos el bucle for. La diferencia entre ambos es la siguiente:

• While: se usa cuando queremos repetir mientras se de una condición.

• For: se usa cuando queremos repetir un número de veces exacto

Hasta ahora hemos usado while cuando hemos querido repetir un número de veces, pero para eso, for es más eficaz. Observa los siguientes códigos:

Estos códigos son exactamente iguales. La diferencia es que con while usamos la variable "contador", y con for usamos la variable "i".

En la condición del for puedes ver lo siguiente: (int i = 0; i < 100; i++). Esto significa:

• int i = 0   ->  se declara la variable i, que valdrá inicialmente 0

• i < 100  ->  es la condición, y mientras i sea menor que 100, el bucle se seguirá repitiendo.

• i++  ->  es equivalente a  i = i + 1

Dibujo con el punto y la línea

Ahora que ya sabemos leer la posición del ratón y detectar pulsaciones de botones, vamos a ver cómo utilizar esta información para crear líneas y puntos a mano alzada.

Vamos a dibujar líneas. Para ello contamos con la siguiente información:

• mouseX y mouseY (posición actual del ratón).

• Coordenadas (x, y) del ratón durante el fotograma anterior.

El código de partida es el siguiente:

int x, y;

void setup(){

  size(600,600);

  x = 0;

  y = 0;

}

void draw(){

  line(x,y,mouseX,mouseY);

  x = mouseX;

  y = mouseY;

}

Tecla pulsada

Podemos detectar si una tecla ha sido pulsada mediante la variable keyPressed que valdrá true o false dependiendo de si hay una tecla pulsada. También podemos saber qué tecla se ha pulsado mediante la variable key. Observa el siguiente código:

Cuando la tecla pulsada es una flecha, el modo de detectarla el siguiente:

Texto con Processing

Algunas funciones que podemos hacer con Processing son las siguientes:

fill(color); // Asigna el color a la letra

textSize(tam); // Configura la fuente a tamaño tam

text("Un texto a escribir",x,y); // Escribe un texto en un área con esquina superior izquierda (x,y)

text("Un texto a escribir", x, y, w, h); // Escribe un texto en la caja definida por los puntos (x,y) y (x+w,y+h).

Números aleatorios

Los números aleatorios se pueden obtener mediante la función siguiente:

float numeroAleatorio = random(-5.0, 10.2);

Mediante números aleatorios, podemos obtener comportamientos impredecibles. Observa el siguiente código:

PVector origen;

PVector destino;

PVector sentido;

void setup(){

  size(400,400); 

  background(0);

  origen = new PVector(width/2,0);

  destino = new PVector(width/2,0);

  sentido = new PVector(1,1);

}

void draw(){

  if (destino.x > width){

    sentido.x = -1;

    ellipse(destino.x,destino.y,50,50);

  }

  if (destino.x < 0){

    ellipse(destino.x,destino.y,50,50);

    sentido.x = 1;

  }

  if (destino.y > height){

    ellipse(destino.x,destino.y,50,50);

    sentido.y = -1;

  }

  if (destino.y < 0){

    ellipse(destino.x,destino.y,50,50);

    sentido.y = 1;

  }

  origen.set(destino);

  destino.x += sentido.x*int(random(0,30));

  destino.y += sentido.y*int(random(10,30));

  fill(0,10);

  noStroke();

  rect(0,0,400,400);

  stroke(100,200,250);

  strokeWeight(10);

  fill(100,200,250);

  line(origen.x,origen.y,destino.x,destino.y);

  println("("+origen.x+","+origen.y+") - ("+destino.x+","+destino.y+")");

}

Rotaciones y escalados

Para rotar y escalar elementos, utilizaremos las siguientes funciones:

rotate(angulo); // rota los dibujos el ángulo en radianes, como por ejemplo PI/4 (45º)

scale(s); // escala los dibujos s veces. Por ejemplo scale(2.0). ¡Ojo, que también desplaza el objeto! Ver la siguiente función

translate(x,y); // nos asegura que la rotación y el escalado no desplazará el objeto

Observa el siguiente código:

float angulo;

int rojo, verde, azul;

int incrementoRojo, incrementoVerde, incrementoAzul;

void setup(){

  size(1000,1000);

  angulo = 0;

  rojo = 0;

  verde = 0;

  azul = 0;

  incrementoRojo = 1;

  incrementoVerde = 2;

  incrementoAzul = 3;

}

void draw(){

  // Cambio de color

  rojo += incrementoRojo;

  verde += incrementoVerde;

  azul += incrementoAzul;

  if ((rojo > 255) || (rojo < 0))

    incrementoRojo *= -1;

  if ((verde > 255) || (verde < 0))

    incrementoVerde *= -1;

  if ((azul > 255) || (azul < 0))

    incrementoAzul *= -1;  

  fill(rojo,verde,azul);

  // Nos aseguramos de que el objeto se dibujará en esta posición  

  translate(mouseX,mouseY);

  // Escalamos (usando la función seno, conseguimos que sea cíclico)

  scale(sin(angulo)+2);

  // Rotamos el dibujo

  rotate(angulo);

  // Dibujamos el rectángulo. El origen es negativo para que el centro del rectángulo coincida con la posición del ratón)

  rect(-30,-30,60,60);

  angulo += 0.1;

}

Diseño de patrones

Los patrones son esquemas repetitivos que crean una cierta textura. Prueba el siguiente código:

size(600, 600);

background(20, 131, 34);

stroke(255, 155);

strokeWeight(2);

for (int y = -30; y <= height; y += 40) {

  println("-----------------------------");

  println(">>>> y = " + y);

  for (int x = -30; x <= width; x += 50) {

    println("x = " + x);

    fill(255, 120);

    triangle(x, y, x-30, y+90, x+30, y+90);

  }

}

Como se puede ver, la clave está en utilizar un bucle donde los elementos se repitan a lo largo de la pantalla.

Otro ejemplo hecho con círculos:

int diametro;

size(600,600); 

diametro = 50;

background(255);

noFill();

for (int j=0; j<=height/diametro; j++){

  println("--------------------------");

  println(" >>> j = " + j);

  for (int i=0; i<=width/diametro; i++){

     println("i = " + i);

     fill(255,0,0,120);

     circle(i*diametro+diametro/2,j*diametro+diametro/2,diametro);

     fill(0,0,255,60);

     circle(i*diametro,j*diametro,diametro);

  }

}

El ejemplo anterior, con algunas modificaciones para ser algo más interactivo:

int diametro;

float grosor;

float color1, color2, color3;

void setup(){

  size(600,600); 

  diametro = 50;

}

void draw(){

  background(255);

  noFill();

  for (int j=0; j<=height/diametro; j++)

    for (int i=0; i<=width/diametro; i++){

       grosor = map(sqrt(pow(j*diametro - mouseY,2) + pow(i*diametro - mouseX,2)),0,width,0,20);

       color1 = map(mouseX,0,width,0,255);

       color2 = map(mouseY,0,height,0,255);

       color3 = map(mouseX,0,width,0,255);

       strokeWeight(grosor);

       fill(color1,0,color2,30);

       circle(i*diametro+diametro/2,j*diametro+diametro/2,diametro);

       fill(0,color3,0,30);

       circle(i*diametro,j*diametro,diametro);

    }

}

Arrays

Antes de entrar en la parte de aplicar filtros, es necesario entender qué es un array. Un array es una variable que puede contener muchos valores (no sólo uno como hasta ahora).  Podemos ver un array como una cajonera, donde cada cajón contiene un valor. La siguiente imagen representa un array de valores float:

Cada uno de los cajones tiene una etiqueta, para saber qué "cajón" quiero abrir. Los cajones son llamados posiciones del array. Vamos a crear el array de la imagen anterior:

float miArray = new float[4]; // este array tiene 4 posiciones

miArray[0] = 10.5; // Hemos insertado 10.5 dentro de la primera posición del array
// (la primera posición es la 0)

miArray[1] = 50.2; // Hemos insertado 50.2 dentro de la segunda posición del array 

  // (la segunda posición es la 1)

miArray[2] = 21.3; // Hemos insertado 21.3 dentro de la primera posición del array 

  // (la tercera posición es la 2)

miArray[3] = 12.2; // Hemos insertado 12.2 dentro de la segunda posición del array 

   // (la cuarta posición es la 3)

Para mostrar el valor en la posición 2, tendríamos que escribir:

println(miArray[2]); // Escribe 21.3

Para mostrar el valor en la posición 0, tendríamos que escribir:

println(miArray[0]); // Escribe 10.5

Podemos utilizar un array como cualquier otra variable. Por ejemplo:

numeros[3] = numeros[0] + 5; // Almacena en numeros[3] el valor 15.5

Recorrer todas las posiciones de un array

Para recorrer todas las posiciones de un array, lo mejor es utilizar un bucle for. Por ejemplo, supongamos que queremos sumar 10 a todos los números en un array llamado "valores":

for (int i = 0; i < valores.length;  i++)

valores[i] = valores[i] + 10;

Ejemplo de aplicación práctica de los arrays

int [] xpos = new int[50];

int [] ypos = new int[50];

void setup(){

  size(600,600);

  for (int i = 0; i < xpos.length; i++){

    xpos[i] = 0;

    ypos[i] = 0;

  }

}

void draw(){

  background(255);

  for (int i = 0; i < xpos.length - 1; i++){

    xpos[i] = xpos[i+1];

    ypos[i] = ypos[i+1];

  }

  xpos[xpos.length-1] = mouseX;

  ypos[ypos.length-1] = mouseY;

  for (int i = 0; i < xpos.length; i++){

     noStroke();

     fill(255-i*5);

     ellipse(xpos[i], ypos[i], i, i);

  }

}

La tabla de multiplicar de un número.

Supongamos que queremos mostrar la tabla de multiplicar del número 6. Utilizando arrays haríamos lo siguiente:

int[] tablaDeMultiplicar = new int[10];

tablaDeMultiplicar[0] = 6*1;

tablaDeMultiplicar[1] = 6*2;

tablaDeMultiplicar[2] = 6*3;

...

tablaDeMultiplicar[9] = 6*10;

Finalmente, mostraríamos el resultado del siguiente modo:

for (int i=0; i<tablaDeMultiplicar.length; i++){

println(tablaDeMultiplicar[i]);

}

Imágenes como matrices de píxeles

Las imágenes son matrices de píxeles, es decir, un cuadro de puntos. En la siguiente imagen podemos ver una imagen de cerca donde se apreciará mejor:

Los colores de los píxeles

En una imagen, cada píxel incluye tres números:

• la cantidad de rojo

• la cantidad de verde

• la cantidad de azul

La ubicación de cada píxel

Cada píxel tiene una ubicación, que viene en forma de fila y columna. A partir del número de fila y el número de columna, podemos saber el número a través del que acceder a ese píxel mediante la siguiente fórmula:

nº de píxel = columna + ancho_imagen * fila

Accediendo a los píxeles en Processing

Cuando creamos un nuevo programa con Processing, una de las cosas que hacemos es determinar el ancho y alto de la ventana. La ventana está también compuesta de píxeles, a los que accedemos normalmente mediante funciones como rect, ellipse o line.

Para cargara la matriz de píxeles de la ventana (que inicialmente es de color gris), debemos ejecutar la función siguiente:

loadPixels()

Esta función carga la matriz pixels con los píxeles de la ventana. Si queremos modificar el pixel (x,y) para asignarle el color color(255,0,0), podemos hacer lo siguiente:

loadPixels();

pixels[x + y * anchoVentana] = color(255,0,0);

Finalmente debemos ejecutar updatePixels() para que la matriz se actualice. 

Por ejemplo vamos a probar este ejemplo:

void setup(){

  size(500,500);

  loadPixels();

}

void draw(){

  int numeroPixel = mouseX + width*mouseY;

  pixels[numeroPixel] = color(0,0,0);

  updatePixels();

}

Al pasar por una cierta posición, vamos pintando píxeles de color negro. Parece poca cosa, pero es la base para lo siguiente.

Filtros

los filtros toman cada pixel de una imagen y bajo ciertas condiciones, lo modifican. Existen muchos filtros (tantos como se nos ocurran). Por ejemplo, vamos pensar en diferentes filtros:

Un filtro que pinta de blanco un píxel cuando el color rojo supera el valor 200

PImage leon;

void setup(){

  size(780,407);

  leon = loadImage("leon.jpg");

  loadPixels();

  for (int i=0; i<leon.width; i++)

    for (int j=0; j<leon.height; j++){

      float r = red(leon.pixels[i+leon.width*j]);

      float g = green(leon.pixels[i+leon.width*j]);

      float b = blue(leon.pixels[i+leon.width*j]);

      if (r > 200)

        pixels[i+leon.width*j] = color(255,255,255);

      else

        pixels[i+leon.width*j] = color(r,g,b);

    }

  updatePixels();

}

Un filtro que intercambia el canal rojo con el verde

PImage leon;

void setup(){

  size(780,407);

  leon = loadImage("leon.jpg");

  loadPixels();

  for (int i=0; i<leon.width; i++)

    for (int j=0; j<leon.height; j++){

      float r = red(leon.pixels[i+leon.width*j]);

      float g = green(leon.pixels[i+leon.width*j]);

      float b = blue(leon.pixels[i+leon.width*j]);

      pixels[i+leon.width*j] = color(g,r,b);

    }

  updatePixels();

}

Un filtro que pinta de negro los píxeles que tienen un nivel de brillo inferior a un nivel preestablecido (llamado umbral o threshold)

PImage leon;

void setup(){

  size(780,407);

  leon = loadImage("leon.jpg");

  loadPixels();

  for (int i=0; i<leon.width; i++)

    for (int j=0; j<leon.height; j++){

      float r = red(leon.pixels[i+leon.width*j]);

      float g = green(leon.pixels[i+leon.width*j]);

      float b = blue(leon.pixels[i+leon.width*j]);

      float brillo = (r+g+b)/3;

      if (brillo > 100) 

        pixels[i+leon.width*j] = color(r,g,b);

      else

        pixels[i+leon.width*j] = color(0);

    }

  updatePixels();

}

Puntillismo y otras opciones de arte generativo a partir de imágenes

Entendiendo cómo se accede a una imagen píxel a píxel, es posible crear obras de puntillismo y otras técnicas. La idea es la siguiente: imagina que tenemos la siguiente imagen:

Si leemos píxel a píxel la imagen, podemos leer su color, y reescribirlo en la ventana como otra cosa, como un punto Point o una línea Line o una letra Text, un rectángulo Rect, etc. Las posibilidades son muy variadas. La siguiente imagen muestra la idea.

Si a esta idea le añadimos aleatoriedad, escaneando aleatoriamente distintas ubicaciones de la imagen, podemos obtener algo como lo siguiente:

Después de 30 segundos

Después de 1 minuto

Después de 2 minutos

Esto mismo lo podemos hacer con cualquier otro elemento de dibujo, como puntos, letras, palabras. En el siguiente ejemplo, se ha utilizado la palabra Blade.

Después de 10 segundos

Después de 30 segundos

Después de 1 minuto

Si quieres guardar tu imagen cuando pulses (por ejemplo) la letra "g", basta con que añadas el siguiente fragmento de código al final de tu programa:

void keyPressed(){

  if (key == 'a')

    save("blade_puntillismo.jpg");

}

La imagen generada podrás encontrarla en la carpeta de tu proyecto.

Minijuegos

Por petición popular, vamos a escribir el minijuego de la serpiente y la manzana. Para ver cómo puedes hacerlo, sigue las siguientes indicaciones: https://docs.google.com/document/d/1Nqja_9CC3zR-JNzR1lqRqFtelWEvV33Vp1WivftmS-0/edit?usp=sharing