[Tutorial] Processing – Colores

[singlepic id=161 w=420 h=340 float=center]

Colores

Algo muy importante en la programacion visual son los colores, en processing son usados para colorear las figuras, ya sea su relleno o su contorno, y asi darle un toque mas vistoso a tu programa. Se puede trabajar con colores en escala de grises y colores RGB (RedGreenBlue), incluso se le puede aplicar transparencia al color.

En processing tambien existe un tipo de dato para guardar nuestros colores en una variable que sera del tipo color.

Escala de grises

La escala de grises trabaja con un solo parametro, que es la cantidad de iluminacion en el color, trabaja en un rango de 0-255 (Un byte) donde 0 es el color negro y 255 el color blanco, los valores intermedios iran variando en intensidad de luz. Para declarar una variable del tipo color se usa la siguiente sintaxis:

[code language=”java”]
color nombreVariable;
[/code]

Ahora le asignamos el valor de la escala de grises de la siguiente manera:

[code language=”java”]
color gris,blanco=color(255),negro=0;
gris=color(128);
grisFuerte=60;
[/code]

RGB

Los colores de tipo RGB nos brindan toda la gama de colores posible, hace uso de la combinacion de colores para crear uno nuevo por ejemplo Rojo + Azul = Morado, pudiendo obtener millones de combinaciones posibles. Los colores RGB necesitan tres parametros, que seran la intensidad de cada color RGB respectivamente en el rango de 0-255, la variable se declara de la misma manera y se le puede asignar un valor de la siguiente manera:

[code language=”java”]
color rojo=color(255,0,0),verde=color(0,255,0),azul,morado;
azul=color(0,0,255);
morado=color(255,0,255);
[/code]

incluso se pueden hacer operaciones con los colores:

[code language=”java”]
color rojo=color(255,0,0),azul,morado;
azul=color(0,0,255);
morado=rojo+azul;
[/code]

Processing cuenta con una herramienta muy útil para elegir nuestros colores y obetener los respectivos valores RGB, para acceder a ella solo tienen que ir a Tools>>Color Selector y elegir el color deseado.

[singlepic id=160 w=420 h=340 float=center]

Ahora que sabemos como funcionan los colores, es hora de llenar de color nuestra pantalla, lo principal es el fondo de nuestro programa, este se puede cambiar con la función

[code language=”java”]
background(color);
[/code]

Por ejemplo, usemos los colores anteriores para personalizar nuestro fondo:

[code language=”java”]
color rojo=color(255,0,0),azul,morado;
azul=color(0,0,255);
morado=rojo+azul;

background(morado);
[/code]

[singlepic id=159 w=420 h=340 float=center]
Cada figura que dibujamos tiene un color de contorno (stroke) y uno de relleno (fill) que podemos cambiar con las funciones:

[code language=”java”]
fill(color);
stroke(color);
[/code]

Al ejecutar estas funciones, las figuras dibujadas tendrán ahora los colores de relleno y contorno asignados, pero si queremos eliminar el relleno y el contorno usamos lo siguiente:

[code language=”java”]
noFill();
noStroke();
[/code]

Ahora veamos un ejemplo utilizando todo esto:

[code language=”java”]
size(200,200);

color rojo=color(255,0,0),verde=color(0,255,0),azul,morado,blanco=255,negro;
negro=0;
azul=color(0,0,255);
morado=rojo+azul;

background(morado);

fill(rojo);
stroke(blanco);
ellipse(20,20,30,30);

fill(verde);
stroke(negro);
rect(100,100,40,50);

fill(azul);
noStroke();
rect(50,120,40,50);

noFill();
stroke(blanco);
ellipse(100,70,30,30);
[/code]

[singlepic id=158 w=420 h=340 float=center]

Adrian MB

Me gusta la electrónica, programación y todo lo relacionado. Ing. en Mecatronica de la UPIITA del IPN y estudiante de Diseño Industrial en la UAM. @adrianmtzb http://adrianmb.mx

También te podría gustar...

  • Muy buenos tús tutoriales, me agrado bastante tu tetris, es impresionante como lo desarrollaste, espero ver pronto el código de colores terminado, suerte.
    +1

  • Roger

    Muy buenos tús tutoriales, me agrado bastante tu tetris, es impresionante como lo desarrollaste, espero ver pronto el código de colores terminado, suerte.

    Saludos::::…