Color RGB

Processing nos permite varias formas de definir el color de los objetos y formas dibujadas:

1. RGB: supone que cualquier valor es mezcla de rojo, verde y azul. El valor de cada uno de estos tres colores va desde 0 a 255.

En algunos casos se utiliza un cuarto parámetro que indica transparencia.

Por ejemplo:  RGB ( 135, 66, 143)

En el siguiente ejemplo vamos a dibujar con la función color() que se emplea para definir y almacenar un color en un programa, se puede usar en  background(), fill(), y stroke().

• Processing puede trabajar con el modo de color RGB utilizando cuatro variables (rojo, verde, azul y alfa o transparencia), definidas cada una por un byte con un rango de valores que va de 0 a 255.
  color(255,0,0) = rojo                    color(0,255,0,127)= verde con 50% transparencia
• Si un color tiene sus tres valores R, G y B iguales entre sí, se puede expresar con un solo valor: color(180);

Para indicar con que modo de color y el rango en el que estamos trabajando usaremos la función colorMode():

• colorMode(modo)
• colorMode(modo, rango)
• colorMode(modo, rango1, rango2, rango3)

Ejemplos:

colorMode(RGB, 255)
Para un rango de valores entre 0 y 255.

Puede usarse también, el modo de anotación hexadecimal. En la que los valores RGB pasa de usar tres dígitos de 0 a 255 a dos usando nomenclatura en base 16 de 0 a 9 y de A a F, se identifica poniendo el # delante.

 De estos seis números, los dos primeros corresponden al rojo, los dos siguientes al verde y los dos últimos al azul.

Por ejemplo:  background (#87428f);

HSB o HSV

 2. HSB o HSV: indica, tono, saturación y brillo.  En Processing el valor de cada uno en lugar de en grados va desde el 1% hasta el 100%. Si se utiliza un cuarto parámetro, es la transparencia.

El modelo HSB (o HSV, como se prefiera) deriva del espacio RGB y representa los colores combinando tres valores: el tono en sí (H), la saturación o cantidad de color (S) y el brillo del mismo (B). Estos valores suelen representarse en un diagrama circular (principal uso de este modelo).

Estas tres magnitudes pueden tener los siguientes valores: 

• H (color en concreto). Valores de 0-360º. La gama cromática se representa en una rueda circular y este valor expresa su posición.
• S (Saturación). Valores de 0-100%. De menos a más cantidad de color.
• B (Brillo). Valores de 0-100%. De totalmente oscuro a la máxima luminosidad.

Por ejemplo:  en la imagen es  HSV ( 294, 54, 56)

Para obtener cualquiera de los colores podemos utilizar abrir el menú principal en Herramientas / Selector de colores. Y podemos copiar los datos de color rgb o utilizar la opción “copiar”

En este ejemplo vemos la diferencia del resultado cambiando el matiz del color de la línea. StrokeWeight( ) nos permite definir el grosor de la línea.

                          

Interacción con el teclado 

Para saber si una tecla ha sido presionada se utiliza la variable booleana keyPressed (tecla presionada), que devuelve el valor true (verdadero) si alguna tecla ha sido presionada y devuelve false (falso) si no se ha pulsado ninguna tecla.

En el control del tiempo de Processing se utiliza la función delay(tiempo en ms), que controla el paso del tiempo en mili segundos.

Iteración con teclado

Variable	Descripción
delay()	controla el paso del tiempo en mili segundos.
keyPressed, keyReleased,	son variables de tipo Booleanas, que  reaccionan a las acciones del teclado, como presionar una tecla o soltarlos.

Ejemplo;

Interacción con el ratón

Processing permite ejecutar acciones al detectar determinados eventos del ratón. Estos eventos pueden ser: cuando el ratón es pulsado, cuando el ratón es soltado, cuando se arrastra el ratón, obtener las coordenadas del ratón en la pantalla, etc.

Iteración con teclado y ratón

Variable	Descripción
mouseX	indica la posición del ratón en el eje X.
mouseY	indica la posición del ratón en el eje Y.
mousePressed, mouseBotton, mouseReleased;	son variables de tipo Booleanas que reaccionan a las acciones del ratón, como presionar el ratón o soltarlos.

Al mover el ratón por la ventana, continuamente van cambiando las coordenadas X e Y del ratón, y por tanto, las dos funciones anteriores, también van variando su valor. Esto nos puede servir para mover objetos en nuestra ventana.

Ejemplo:

Números aleatorios

Para generar números aleatorios se utiliza la función Random(x); , "x" debe ser un número cualquiera de modo que la función Random, devolverá un valor al azar comprendido entre "o" y "x".

    Por ejemplo; si escribimos Random(256); nos devolvería cada vez un número diferente entre "o y 255".

Si la función Random tuviera dos parámetros sería Random(x,y); .
En este caso el rango de números posibles sería desde "x" hasta "y".

    Por ejemplo;