sábado, 8 de abril de 2017

Osito | Los colores

Cuando hicimos el dibujo del osito, lo pusimos en color blanco, ya que los colores predefinidos no tienen café, ahora vamos a cambiar los colores por colores personalizados, para esto necesitamos entender como se manejan los colores en java. Haremos uso de la clase Color, como ya había mencionado, tiene colores predefinidos que son los siguientes:
Como podemos observar son colores básicos y muy limitados, sin embargo podemos crear nuestro propio color, para esto necesitamos crear un objeto nuevo de la clase Color, lo podemos hacer dentro de la llamada al método setColor(obj Color), o cualquier otro que reciba un objeto de la clase Color.
Tenemos que entender que Color trabaja los colores en formato RGB, es decir, tenemos que indicar un valor para el Rojo, uno para el verde (Green) y uno para el azul (Blue), los podemos indicar como enteros, como valores flotantes y como números random. Para los enteros y los números random vamos a trabajar en un rango de 0-255, 0 es sin saturación de dicho color y 255 es la máxima saturación de color, los números flotantes son menos utilizados en los applets sencillos de java, sin embargo para otras aplicaciones son los que se utilizan, se manejan en un rango de 0-1, para poner un valor se tiene que hacer una división, por ejemplo, si en el valor de r quiero poner 191, el valor en flotante sería la división del 191 entre el 255, por lo tanto quedaría 191/255, pero aquí no utilizaremos dichos valores. Para sacar los colores que queremos y no estar "adivinando valores" es conveniente usar un seleccionador de colores, el más simple cuando no se tiene una herramienta especializada es el que aparece en Google, lo único que hacemos es buscar "rgb color picker" lo cuál nos da como resultado:
Si queremos algo más concreto, podemos hacer uso de paletas de colores predefinidos, a mi me gusta bastante esta página http://www.colourlovers.com/

 ya que puedes buscar las paletas por temas o colores y elegir los que más te gusten, ahí mismo te da los valores de cada color, por ejemplo, para el dibujo del osito, elegí la siguiente paleta de colores:
Para crear nuestos colores podemos hacerlo de dos maneras, como ya había mencionado; creando un objeto nuevo al principio, o creando el objeto directamente en la invocación, la ventaja de crear los objetos al principio es que si queremos volver a utilizar ese color ya lo tenemos definido, pero si sabemos que ese color solamente se va a utilizar una vez es más conveniente hacer el objeto dentro de la invocación, para ahorrarnos líneas de código. Claro esto ya es preferencia de cada quién.
Vamos a modificar los colores del osito con ambos métodos, por ejemplo, el fondo lo pondré del color "Faded", como no lo voy a utilizar nuevamente, haré el objeto directamente en la invocación de setBackground(obj Color), para hacerlo en el parámetro voy a crear el objeto de la siguiente manera:
setBackground(new Color(R,G,B));
En R,G,B es donde vamos a poner los valores del color, están en orden (228,241,221) en todas las herramientas para selección de colores, los encontramos en orden o indicados por las letras que corresponden y en la creación del objeto los vamos a poner en el mismo orden.
Así para el fondo, el código quedaría de la siguiente manera:
import java.applet.Applet;
import java.awt.*;
public class Osito extends Applet
{
public void init()
{
setSize(500,500);
setBackground(new Color(228,241,221));
setForeground(Color.white);
}
public void paint(Graphics g)
{
g.fillOval(80,154,305,305);//Cabeza
g.fillOval(25,115,139,139);//Oreja Izquierda
g.fillOval(300,115,139,139);//Oreja Derecha
g.setColor(Color.black);
g.fillOval(136,292,33,33);//Ojo Izquierdo
g.fillOval(290,292,33,33);//Ojo Derecho
g.drawOval(187,326,98,100);//Boca
g.fillOval(230,361,4,51);//Nariz-Boca
g.setColor(Color.pink);
g.fillOval(220,351,26,13);//Nariz
g.fillOval(49,145,85,85);//Oreja Izquierda Interna
g.fillOval(324,145,85,85);//Oreja Derecha Interna
}
}
Y podemos ver que el fondo ya tiene el color que elegimos:

Ahora para hacer la base usaré el color "Fizz"(185,165,143), para esto voy a crear el objeto antes de hacer la invocación:
import java.applet.Applet;
import java.awt.*;
public class Osito extends Applet
{
public void init()
{
setSize(500,500);
setBackground(new Color(228,241,221));
}
public void paint(Graphics g)
{
Color Fizz=new Color(185,165,143);
g.setColor(Fizz);
g.fillOval(80,154,305,305);//Cabeza
g.fillOval(25,115,139,139);//Oreja Izquierda
g.fillOval(300,115,139,139);//Oreja Derecha
g.setColor(Color.black);
g.fillOval(136,292,33,33);//Ojo Izquierdo
g.fillOval(290,292,33,33);//Ojo Derecho
g.drawOval(187,326,98,100);//Boca
g.fillOval(230,361,4,51);//Nariz-Boca
g.setColor(Color.pink);
g.fillOval(220,351,26,13);//Nariz
g.fillOval(49,145,85,85);//Oreja Izquierda Interna
g.fillOval(324,145,85,85);//Oreja Derecha Interna
}
}
Para el contorno de la boca y la línea que va de la nariz voy a usar "Woodstock" (162,140,116), haciendo nuevamente la creación fuera de la invocación:
public class Osito extends Applet
{
public void init()
{
setSize(500,500);
setBackground(new Color(228,241,221));
}
public void paint(Graphics g)
{
Color Fizz=new Color(185,165,143);
Color Woodstock=new Color(162,140,116);
g.setColor(Fizz);
g.fillOval(80,154,305,305);//Cabeza
g.fillOval(25,115,139,139);//Oreja Izquierda
g.fillOval(300,115,139,139);//Oreja Derecha
g.setColor(Color.black);
g.fillOval(136,292,33,33);//Ojo Izquierdo
g.fillOval(290,292,33,33);//Ojo Derecho
g.setColor(Woodstock);
g.drawOval(187,326,98,100);//Boca
g.fillOval(230,361,4,51);//Nariz-Boca
g.setColor(Color.pink);
g.fillOval(220,351,26,13);//Nariz
g.fillOval(49,145,85,85);//Oreja Izquierda Interna
g.fillOval(324,145,85,85);//Oreja Derecha Interna
}
}
Por último voy a cambiar el color de las orejas y la nariz, para esto haré uso de la herramienta de Google:

Para crear el color (255,221,228), para este color haré el objeto dentro de la invocación:
import java.applet.Applet;
import java.awt.*;
public class Osito extends Applet
{
public void init()
{
setSize(500,500);
setBackground(new Color(228,241,221));
}
public void paint(Graphics g)
{
Color Fizz=new Color(185,165,143);
Color Woodstock=new Color(162,140,116);
g.setColor(Fizz);
g.fillOval(80,154,305,305);//Cabeza
g.fillOval(25,115,139,139);//Oreja Izquierda
g.fillOval(300,115,139,139);//Oreja Derecha
g.setColor(Color.black);
g.fillOval(136,292,33,33);//Ojo Izquierdo
g.fillOval(290,292,33,33);//Ojo Derecho
g.setColor(Woodstock);
g.drawOval(187,326,98,100);//Boca
g.fillOval(230,361,4,51);//Nariz-Boca
g.setColor(new Color(255,221,228));
g.fillOval(220,351,26,13);//Nariz
g.fillOval(49,145,85,85);//Oreja Izquierda Interna
g.fillOval(324,145,85,85);//Oreja Derecha Interna
}
}
Y así queda nuestro dibujo con los colores nuevos, ahora si queremos que los colores sean distintos cada vez que corramos nuestra aplicación podemos hacer uso de números random, para verlo voy a hacer que el fondo sea un color distinto, para esto, necesitamos generar 3 números random, uno para cada valor:
(int)Math.round(Math.random()*256)
entonces para poder poner los tres colores el código quedaría así:
import java.applet.Applet;
import java.awt.*;
public class Osito extends Applet
{
public void init()
{
setSize(500,500);
setBackground(new Color((int)Math.round(Math.random()*256),(int)Math.round(Math.random()*256),(int)Math.round(Math.random()*256)));
}
public void paint(Graphics g)
{
Color Fizz=new Color(185,165,143);
Color Woodstock=new Color(162,140,116);
g.setColor(Fizz);
g.fillOval(80,154,305,305);//Cabeza
g.fillOval(25,115,139,139);//Oreja Izquierda
g.fillOval(300,115,139,139);//Oreja Derecha
g.setColor(Color.black);
g.fillOval(136,292,33,33);//Ojo Izquierdo
g.fillOval(290,292,33,33);//Ojo Derecho
g.setColor(Woodstock);
g.drawOval(187,326,98,100);//Boca
g.fillOval(230,361,4,51);//Nariz-Boca
g.setColor(new Color(255,221,228));
g.fillOval(220,351,26,13);//Nariz
g.fillOval(49,145,85,85);//Oreja Izquierda Interna
g.fillOval(324,145,85,85);//Oreja Derecha Interna
}
}
Así, cada que corremos nuestra aplicación, nos aparece un color de fondo distinto:
                                             






No hay comentarios.:

Publicar un comentario

Osito | Los métodos drawOval y fillOval

Como mencioné anteriormente, la clase Graphics tiene distintos métodos para dibujar figuras, vamos a iniciar con el método fillOval(x,y,anc,...