11

Punto 3 – Modos de color. Fondo, contorno y relleno

colorMode() - Modo de color

El color es una propiedad perceptual visual humana fundamental. La misma ha sido estudiada y analizada según varios modelos: CIE, RGB, YUV, HSL/HSV/HSB y CMYK. En el campo informático, en general trabajamos con el modelo RGB pero es más recomendable trabajar con HSB ya que dicho modelo se ajusta más a la experiencia plástica de conformación de color que hemos incorporado desde nuestra más temprana infancia. Para definir qué modelo de color usaremos utilizamos la función colorMode().

Veremos que para utilizar la función colorMode() podremos escoger cuatros versiones distintas de dicha función:

colorMode(modo) HSB o RGBcolorMode(modo, rango) int o floatcolorMode(modo, rango1, rango2, rango3) int o floatcolorMode(modo, rango1, rango2, rango3 , alpha)  int o float

Sintaxis de colorMode()

Sintaxis:colorMode(modo);colorMode(modo, rango);colorMode(modo, rango1, rango2, rango3);colorMode(modo, rango1, rango2, rango3, alpha); 

Parámetros:modo RGB o HSB:       correspondientes a Red/Green/Blue y 

            Hue/Saturation/Brightness.rango  int o float: rango para todos los elementos de colorrango1  int o float: rango para el Rojo o Tono dependiendo del 

modo de color actual.rango2 int o float: rango para el Verde o Saturación 

            dependiendo del modo de color actual.rango3  int o float: rango para el Azul o Brillo dependiendo del 

modo de color actual.alpha int o float: rango para Alpha (0 transparencia total, 

      máximo opacidad total).

Ejemplo de colorMode()

colorMode(HSB, 360, 100, 100, 100);

Introducción a Processing v1.5+  Docente: Raúl Lacabanne

12

Fondo, contorno y relleno

Hemos visto cómo seleccionar el modo (o modelo) de color que queremos utilizar para representar los colores. Ahora veremos cuáles son las funciones más importante que nos permiten “colorear” fondos y figuras. La función background() permite modificar el color de fondo de nuestra área de representación. El valor por defecto de dicha función es 204 (gris claro). Para cambiar el color del contorno de una figura usaremos la función stroke(), cuyo valor por defecto es 0 (negro). Si queremos modificar el color del relleno de una figura usaremos la función fill(), cuyo valor por defecto es 255 (blanco). Por último, si deseamos que nuestra figura no presente contorno o relleno, utilizaremos las funciones noStroke() para la primera y noFill() para la segunda.

Sintaxis de background()

background(gray)background(gray, alpha)background(value1, value2, value3)background(value1, value2, value3, alpha)background(color)background(color, alpha)background(hex)background(hex, alpha)

Parámetros de las versiones de background()

gray  int o float: valores entre blanco y negro.alpha  int o float: valor de opacidad (0 = transparencia, 255 = opacidad).value1 int o float: rojo o valor de matiz (depende del modo de color).value2 int o float: verde o valor de saturación (depende del modo de color).value3 int o float: azul o valor de brillo (depende del modo de color).color  color: cualquier valor del tipo de dato color. hex   int: valor de color en notación hexadecimal (ej.: #FFCC00 ó 0xFFFFCC00).

Ejemplos de background()

colorMode(HSB, 360, 100, 100);background(51);

o bien:

colorMode(HSB, 360, 100, 100);background(255, 204, 0);

Introducción a Processing v1.5+  Docente: Raúl Lacabanne

13

Parámetros de versiones de background(), stroke() y fill()

gray  int o float: valores entre blanco y negro.alpha  int o float: valor de opacidad (0 = transparencia, 255 = opacidad).value1 int o float: rojo o valor de matiz (depende del modo de color).value2 int o float: verde o valor de saturación (depende del modo de color).value3 int o float: azul o valor de brillo (depende del modo de color).color  color: cualquier valor del tipo de dato color. hex   int: valor de color en notación hexadecimal (ej.: #FFCC00 ó 0xFFFFCC00).

Sintaxis de stroke()

stroke(gray)stroke(gray, alpha)stroke(value1, value2, value3)stroke(value1, value2, value3, alpha)stroke(color)stroke(color, alpha)stroke(hex)stroke(hex, alpha)

Ejemplos de stroke()

stroke(153);rect(30, 20, 55, 55);

o bien:

stroke(204, 102, 0);rect(30, 20, 55, 55);

Sintaxis de fill()

fill(gray)fill(gray, alpha)fill(value1, value2, value3)fill(value1, value2, value3, alpha)fill(color)fill(color, alpha)fill(hex)fill(hex, alpha)

Introducción a Processing v1.5+  Docente: Raúl Lacabanne

14

Ejemplos de fill()

fill(153);rect(30, 20, 55, 55);

o bien:

fill(204, 102, 0);rect(30, 20, 55, 55);

Lectura recomendada

• Buioli, I. & Pérez Marín, J. "Processing: un lenguaje al alcance de todos", Autoedición, 2013, Unidad 9 "Color: Color por números" (pag. 48).

• Reas, C. & Fry, B. "Processing: A Programming Handbook for Visual Designers and Artists”, MIT Press, 2007, Capítulo “Color 1: Color by Numbers” (pag. 85).

Ejercicio 3

• Componer un cuadro con una resolución de 300x300 que contenga las siguientes figuras:◦ dos elipses, cuatro líneas y un rectángulo.

• Las figuras podrán tener sólo dos colores y el fondo de la composición (background) otro distinto.

• Comentar todas las instrucciones.

Introducción a Processing v1.5+  Docente: Raúl Lacabanne