View
3
Download
0
Category
Preview:
DESCRIPTION
Intro Processing v1.5 - 03 - Raúl Lacabanne
Citation preview
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
Recommended