En esta unidad vamos a trabajar los conceptos básicos de Processing, aprenderemos cómo es el sistema de coordenadas, las diferentes funciones que nos ofrece Processing para crear formas básicas, así como las variables y funciones que nos van a permitir añadir interactividad a nuestros sketches.

• ¿Que es un sketch?

• Sistema de coordenadas

• Formas básicas

• Interactividad

• Colores

Un sketch es un programa que contiene las instrucciones que queremos ejecutar.

A los programas en Processing se les llama sketch

MOUSE

• mouseButton

• mouseClicked()

• mouseDragged()

• mouseMoved()

• mousePressed()

• mousePressed

• mouseReleased()

• mouseWheel()

• mouseX

• mouseY

• pmouseX

• pmouseY

KEYBOARD

• key

• keyCode

• keyPressed()

• keyPressed

• keyReleased()

• keyTyped()

ESCALA DE GRISES

RGB

CODIFICACIÓN EN HEXADECIMAL

FUNCIONES PARA TRABAJAR CON COLOR

• background()

• clear()

• colorMode()

• fill()

• noFill()

• noStroke()

• stroke()

Realiza el siguiente dibujo en un área de 600x600 pixeles

Realiza el primer dibujo aplicando el bucle for y determina el tamaño haciendo uso de variables. Para el segundo dibujo, busca información sobre la instrucción RANDOM y empléala  para determinar el color a través del uso de variables. El tercer dibujo, por ser el más difícil, quien lo consiga, tendrá un 10 en el apartado: "uso de bucles y variables". Pista: hay que usar un doble condicional con el operador lógico && (significa "y"), por ejemplo: if(hora==14 && minuto==20) significa que hará lo que tenga que hacer cuando, simultáneamente, hora valga 14 "y" minuto valga 20 (por ejemplo, para programar una alarma).

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.

Para practicar. Modifica el ejercicio anterior, para poder hacer un dibujo como el siguiente: 

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: 

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){

...

}